Q696 How can I show a description directly under an image map, using onMouseOver?

You are here: irt.org | FAQ | DHTML | Q696 [ previous next ]

Try the following:

<HTML>

<HEAD>

<STYLE type="text/css"><!--
.myLayers {
    position: absolute;
    visibility: hidden;
}
//--></STYLE>

<SCRIPT TYPE="text/JavaScript" LANGUAGE="JavaScript"><!--
function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; }
function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; }
//--></SCRIPT>

</HEAD>

<BODY>

<MAP NAME="image-map">
<AREA SHAPE="RECT" COORDS="15,15,85,85" HREF="page1.htm" onMouseOver="show('a')" onMouseOut="hide('a')">
<AREA SHAPE="RECT" COORDS="93,15,110,85" HREF="page2.htm" onMouseOver="show('b')" onMouseOut="hide('b')">
<AREA SHAPE="CIRCLE" COORDS="150,50,35" HREF="page3.htm" onMouseOver="show('c')" onMouseOut="hide('c')">
</MAP>

<IMG SRC="image.gif" BORDER=0 WIDTH=200 HEIGHT=100 USEMAP="#image-map">

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.layers || document.all) {
    document.write('<DIV ID="a" CLASS="myLayers">Waffle, waffle, waffle!</DIV>')
    document.write('<DIV ID="b" CLASS="myLayers">Blah, blah, blah!</DIV>')
    document.write('<DIV ID="c" CLASS="myLayers">Bah humbug!</DIV>')
}
//--></SCRIPT>

</BODY>
</HTML>