Q1259 How can I combine tool tips with an image map, but have the tool tips hover at the same place as the mouse pointer?

<script type="text/javascript" language="JavaScript"><!--
function showAt(e,object) {
    var x=y=0;

    if (document.layers && document.layers[object] != null) {
        document.layers[object].left = e.pageX;
        document.layers[object].top = e.pageY;
        document.layers[object].visibility = 'visible';
    }
    else if (document.all) {
        document.all[object].style.posTop = window.event.x;
        document.all[object].style.posLeft = window.event.y;
        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>

<map name="image-map">
<area shape="rect" coords="15,15,85,85" href="javascript:alert('1')"
    onMouseover="if (window.event || document.layers) showAt(event,'myLayer1'); else showAt('','myLayer1')"
    onMouseout="hide('myLayer1')"
>
<area shape="rect" coords="93,15,110,85" href="javascript:alert('2')"
    onMouseover="if (window.event || document.layers) showAt(event,'myLayer2'); else showAt('','myLayer2')"
    onMouseout="hide('myLayer2')"
>
<area shape="circle" coords="150,50,35" HREF="javascript:alert('3')"
    onMouseover="if (window.event || document.layers) showAt(event,'myLayer3'); else showAt('','myLayer3')"
    onMouseout="hide('myLayer3')"
>
</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>

<div id="myLayer3" class="myStyle">
<table bgcolor="#ffffcc"><tr><td>
Some more text which is also hidden from view until it is
revealed when the mouse moves over the 3rd hot spot
</td></tr></table>
</div>

<style><!--
.myStyle {
  position : absolute;
  visibility: hidden;
  background-color: "#ffffcc";
}
//--></style>

<div id="myLayer1" class="myStyle">
This text is hidden from view.
<br>
It is revealed when the mouse
<br>
moves over the first hot spot
</div>

<div id="myLayer2" class="myStyle">
This text is also hidden from view until it is
revealed when the mouse moves over the 2nd hot spot
</div>

<div id="myLayer3" class="myStyle">
Some more text which is also hidden from view until it is
revealed when the mouse moves over the 3rd hot spot
</div>