Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap

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:

<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; }

<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() {



<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()">

<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 id="image1b">
  <img src="image1b.gif" border="0" width="150" height="350" onMouseout="hideAll()">


©2018 Martin Webb