What Sothink DHTML Menu Can Do for You?

 

Back

Home

Next

 

China Map

 

Introduction:

In this sample, Sothink DHTML Menu 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 show the information of corresponding city. The information includes the city photo, city name, its population, its area, and its interesting places. It is more visual to understand each city' geographic location.

 

Steps:

1. Set the hotspot of your image. (You can use the hotspot function of Dreamweaver to do it.)

2. Add JavaScript function to your page. The function code is like following:

function hideFloatMenu(n)
{
var m=stgMe(n);
if(m) m.aPopups[0]._tTid=setTimeout('hideMenu(\''+n+'\')',m.iDelayHd);
}
function showFloatMenuByEvent(e,n)
{
showFloatMenuAt(n,e.clientX+stgcl(),e.clientY+stgct()+20)
}

3. 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')">

4. 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 .