Q1173 How can I show a description directly under an image map, using onMouseOver, even when the image is in a table and the image is not on the left hand side of the screen?

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

With Microsoft Internet Explorer this isn't a problem, however, with Netscape Navigator 4, you need to set the the layers left Style to a value such that the text lines up with the image. Try something like:

<html>

<head>

<style type="text/css"><!--
.myLayers {
    position: absolute;
    visibility: hidden;
    left: 120;
}
//--></style>

<script type="text/javascript" language="JavaScript"><!--
function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; }
function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; }
//--></script>

</head>

<body>

<map name="image-map">
<area shape="rect" coords="15,15,85,85" href="page1.htm" onMouseOver="show('a')" onMouseOut="hide('a')">
<area shape="rect" coords="93,15,110,85" href="page2.htm" onMouseOver="show('b')" onMouseOut="hide('b')">
<area shape="circle" coords="150,50,35" href="page3.htm" onMouseOver="show('c')" onMouseOut="hide('c')">
</map>

<table><tr><td width="100">
&nbsp;
</td><td>
<img src="image.gif" border=0 width=200 height=100 usemap="#image-map">
</td></tr></table>

<script language="JavaScript"><!--
if (document.layers || document.all) {
    document.write('<div id="a" class="myLayers">Waffle, waffle, waffle!</div>')
    document.write('<div id="b" class="myLayers">Blah, blah, blah!</div>')
    document.write('<div id="c" class="myLayers">Bah humbug!</div>')
}
//--></script>

</body>
</html>