Q1289 How can I position layers relative to an imagemap such that I can hide and reveal layers over parts of the imagemap on mouse over?

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

Try the following:

<head>
<style type="text/css"><!--
#image1  { position: absolute; 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.image1.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>

<span id="image1">
  <img src="image.gif" border="0" width="400" height="400" usemap="#image-map1" onMouseout="hideAll()">

  <span id="image1a">
  <img src="image1a.gif" border="0" width="150" height="350" onMouseout="hideAll()">
  </span>

  <span id="image1b">
  <img src="image1b.gif" border="0" width="150" height="350" onMouseout="hideAll()">
  </span>
</span>

</body>
</html>