You are here: irt.org | FAQ | DHTML | Q1258 [ previous next ]
Try:
<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> <style type="text/css"><!-- .myStyle { position: absolute; visibility: hidden; } //--></style> <map name="image-map"> <area shape="rect" coords="15,15,85,85" href="javascript:alert('1')" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')" > <area shape="rect" coords="93,15,110,85" href="javascript:alert('2')" onMouseover="show('myLayer2')" onMouseout="hide('myLayer2')" > <area shape="circle" coords="150,50,35" HREF="javascript:alert('3')" onMouseover="show('myLayer3')" onMouseout="hide('myLayer3')" > </map> <img name="boxImage" src="white.gif" border=0 width=200 height=100 usemap="#image-map"> <div id="myLayer1" class="myStyle"> <table bgcolor="#ffffcc"><tr><td> This text is hidden from view. <br> It is revealed when the mouse <br> moves over the first hot spot </td></tr></table> </div> <div id="myLayer2" class="myStyle"> <table bgcolor="#ffffcc"><tr><td> This text is also hidden from view until it is revealed when the mouse moves over the 2nd hot spot </td></tr></table> </div> <div id="myLayer3" class="myStyle"> <table bgcolor="#ffffcc"><tr><td> Some more text which is also hidden from view until it is revealed when the mouse moves over the 3rd hot spot </td></tr></table> </div>