Introduction:

This is a world map, which is composed by seven continents. When the mouse moves on the white circle, the images that symbol their continent will pop up. It all deponds on Sothink DHTMLMenu to create so beautiful effect. The menu and the white circles indentify the location of seven continents on the world map.

Steps:

1.Create a blank page and select the design mode in Dreamweaver MX 2004.
2. Insert the image chinatourmap.jpg in the page.
3. Set the hotspot in the image for the place that is needed to insert the menus.
4. In Dreamweaver, select blank place, and press "Sothink" widgets on menu bar, click "DHTMLMenu".
5. Check "Import from File..." in popup dialog "New" to choose the defined .pgt file. After launching Sothink DHTMLMenu, click Menu Type in Global Settings, and select the Custom menu.
Note: Do not forget the menu name.
6. Add following Condition for the first item:
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)
}
STM_AHCM=1;
7. Set the Web Path for the menu.
Visit visual tutorial to grasp it online.
8. Click "Save and Close" button to save the menu and exit DHTMLMenu.
9. Select the hotspot and switch to the code mode in Dreamweaver, modify the highlighted <area>, and add the event for onmouseout as well as onmouseover. The modifications are:
onmouseover='showFloatMenuByEvent(event,&quot;menuname&quot;)' onmouseout='hideFloatMenu(&quot;menuname&quot;)'；
10. Move the script and image files which are in the current page to the corresponding folder in File Panel.
11. Press F12 to preview the page.