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>