Q336 How can I change dynamically change the map associated with a client side imagemap?

You are here: irt.org | FAQ | JavaScript | Image | Q336 [ previous next ]
Only possible in Netscape Navigator 4 and Internet Explorer 4:
<HEAD>
<STYLE type="text/css"><!--
#image1  { position: absolute; top: 0;  left: 0;   width: 400; visibility: visible; }
#image1a { position: absolute; top: 25; left: 25;  width: 150; visibility: hidden; }
#image1b { position: absolute; top: 25; left: 225; width: 150; visibility: hidden; }
--></STYLE>

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.layers)
    var doc = 'document.', vis = '.visibility';
if (document.all)
   var doc = 'document.all.', vis = '.style.visibility';

function show(object) {
    if (document.layers || document.all)
        eval(doc + object + vis + ' = "visible"');
}

function hide(object) {
    if (document.layers || document.all)
        eval(doc + object + vis + ' = "hidden"');
}

function hideAll() {
    hide('image1a');
    hide('image1b');
}
//--></SCRIPT>

</HEAD>

<BODY>

<MAP NAME="image-map1">
<AREA SHAPE="RECT" COORDS="0,0,400,25"     href="#" onMouseover="hideAll()">
<AREA SHAPE="RECT" COORDS="0,25,25,375"    href="#" onMouseover="hideAll()">
<AREA SHAPE="RECT" COORDS="25,25,174,375"  href="#" onMouseover="hideAll();show('image1a')">
<AREA SHAPE="RECT" COORDS="175,25,225,375" href="#" onMouseover="hideAll()">
<AREA SHAPE="RECT" COORDS="225,25,375,375" href="#" onMouseover="hideAll();show('image1b')">
<AREA SHAPE="RECT" COORDS="375,25,400,375" href="#" onMouseover="hideAll()">
<AREA SHAPE="RECT" COORDS="0,375,400,400"  href="#" onMouseover="hideAll()">
</MAP>

<DIV ID="image1">
<IMG SRC="image.gif" BORDER="0" WIDTH="400" HEIGHT="400" USEMAP="#image-map1" onMouseout="hideAll()">
</DIV>

<MAP NAME="image-map2">
<AREA SHAPE="RECT" COORDS="0,0,200,199"   HREF="page2a.html">
<AREA SHAPE="RECT" COORDS="0,200,200,400" HREF="page2b.html">
</MAP>

<DIV ID="image1a">
<IMG SRC="image1.gif" BORDER="0" WIDTH="150" HEIGHT="350" USEMAP="#image-map2" onMouseout="hideAll()">
</DIV>

<MAP NAME="image-map3">
<AREA SHAPE="RECT" COORDS="0,0,200,199"   HREF="page3a.html">
<AREA SHAPE="RECT" COORDS="0,200,200,400" HREF="page3b.html">
</MAP>

<DIV ID="image1b">
<IMG SRC="image1.gif" BORDER="0" WIDTH="150" HEIGHT="350" USEMAP="#image-map3" onMouseout="hideAll()">
</DIV>

</BODY>
</HTML>