I found another code that looks like it will work. Here's the html part of it.
[HTML]<map name="image-map">
<area shape="rect" coords="15,15,85,85" href="javascript
:alert('1')"
onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">
<area shape="rect" coords="93,15,110,85" href="javascript
:alert('2')"
onMouseover="show('myLayer2')" onMouseout="hide('myLayer2')">
</map>
<img name="boxImage" src="white.gif" border=0 width=200 height=100 usemap="#image-map">
<div id="myLayer1" class="myStyle">
<table bgcolor="#ffffcc"><tr><td>
This text is hidden from view.
<br>
It is revealed when the mouse
<br>
moves over the first hot spot
</td></tr></table>
</div>
<div id="myLayer2" class="myStyle">
<table bgcolor="#ffffcc"><tr><td>
This text is also hidden from view until it is
revealed when the mouse moves over the 2nd hot spot
</td></tr></table>
</div>[/HTML]
The JavaScript part is here:
- <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>
-
-
<style type="text/css"><!--
-
.myStyle {
-
position: absolute;
-
visibility: hidden;
-
}
-
//--></style>
Knowing to search for tooltip really helped. New vocab word for me. :)