Introduction:

In this sample, Sothink DHTMLMenu combines with the China map. The menus and red dots identify the locations of several cities on China map. When mouse moves over the red dot, it will shows the information of corresponding city. These information include the city photo, city name, its population, its area, and its interesting places. It is more visual to understand each city' geographic location.

Steps:

• Set the hotspot of your image. (You can use the hotspot function of Dreamweaver to do it.)
• Add JavaScript function to your page. The function code is like following:
  function hideFloatMenu(n)
  {
  var m=stgMe(n);
  if(m) m.ps[0].tid=setTimeout('hideMenu(\''+n+'\')',m.deHd);
  }

  function showFloatMenuByEvent(e,n)
  {
  showFloatMenuAt(n,e.clientX+stgcl(),e.clientY+stgct()+20)
  }

• Add mouse over and mouse over event to image hot area like this:
  <area shape="circle" coords="305,135,8" href="#"
  onmouseover="showFloatMenuByEvent(event,'mBeijing')" onmouseout="hideFloatMenu('mBeijing')">
• Modify the file "stmenu.js": change the STM_AHCM=0;into STM_AHCM=1;

Note:

e.clientX+stgcl() and e.clientY+stgcl() are for browsers as IE, Opera, FireFox, Safari, etc.
But if you use browser Netscape 4, you should change them into e.pageX and e.pageY .

It is a cool menu, isn't it? This result is reached by the script in the menu. If you want your menu to realize the special function and effect, but you are not familiar with the script, view here to submit your request to us. We will assist you to get it.