You are here: irt.org | FAQ | DHTML | Q720 [ previous next ]
Try:
<MAP NAME="image-map"> <AREA SHAPE="RECT" COORDS="0,0,100,200" HREF="javascript:alert('testing')" onMouseOver="show('text1')" onMouseOut="hide('text1')"> <AREA SHAPE="RECT" COORDS="101,0,200,200" HREF="javascript:alert('testing')" onMouseOver="show('text2')" onMouseOut="hide('text2')"> <AREA SHAPE="RECT" COORDS="201,0,300,200" HREF="javascript:alert('testing')" onMouseOver="show('text3')" onMouseOut="hide('text3')"> </MAP> <SPAN ID="big" STYLE="position:absolute; width:300; height:200;"> <TABLE WIDTH="300" HEIGHT="200" BORDER="0" BGCOLOR="#FFCC00" CELLSPACING="0"> <TR> <TD> <IMG NAME="boxImage" SRC="large.gif" BORDER=0 WIDTH=300 HEIGHT=200 USEMAP="#image-map"> </TD> </TR> </TABLE> </SPAN> <SPAN ID="text1" STYLE="position:absolute; width:100; height:25; visibility: hidden;"> This is some text... </SPAN> <SPAN ID="text2" STYLE="position:absolute; width:100; height:25; visibility: hidden;"> This is some more text... </SPAN> <SPAN ID="text3" STYLE="position:absolute; width:100; height:25; visibility: hidden;"> This is yet some more text... </SPAN> <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!-- function show(object) { if (document.layers && document.layers[object]) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; } function hide(object) { if (document.layers && document.layers[object]) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } if (document.layers) { document.layers['big'].left = 50; document.layers['big'].top = 50; document.layers['text1'].left = 55; document.layers['text1'].top = 55; document.layers['text2'].left =155; document.layers['text2'].top = 150; document.layers['text3'].left =255; document.layers['text3'].top = 185; } else if (document.all) { document.all('big').style.posLeft = 50; document.all('big').style.posTop = 50; document.all('text1').style.posLeft = 55; document.all('text1').style.posTop = 55; document.all('text2').style.posLeft =155; document.all('text2').style.posTop = 150; document.all('text3').style.posLeft =255; document.all('text3').style.posTop = 185; } //--></SCRIPT>