DIV disappears on image map mouseover. Need it to stay open to click link in DIV

I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't.

I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working.


<img src="images/map.png" alt="" usemap="#map"/>

<map id="map" name="map">
<area shape="rect" coords="211,84,225,97" href="#" alt=""/>
<area shape="rect" coords="226,78,240,92" href="#" alt=""/>
<area shape="rect" coords="353,66,376,89" href="#" alt=""/>
</map>

<div id="hidden">
<div class="location" style="left:25px; top:-290px;">
<img src="images/location01.jpg" alt=""/>
</div>

<div class="location" style="left:25px; top:-275px;">
<img src="images/location02.jpg" alt=""/>
</div>

<div class="location" style="left:275px; top:-285px;">
<img src="images/location03.jpg" alt=""/>
</div>
</div> <!-- #hidden -->



function show(which) {
var area = document.getElementById("map").getElementsByTagName("area");
var locations = document.getElementById("hidden").getElementsByTagName("div");

for (var a=0; a < area.length; ++a) {
if(area[a] == which) locations[a].style.display="block";
}
}

function hide() {
var locations = document.getElementById("hidden").getElementsByTagName("div");

for (var d=0; d < locations.length; ++d) {
locations[d].style.display="none";
}
}

function init() {
var area = document.getElementById("map").getElementsByTagName("area");

for (var a=0; a < area.length; ++a) {
area[a].onmouseover = function() { show(this); }
area[a].onmouseout = hide;
}
}

window.onload = init;

You should remove area[a].onmouseout = hide first and then you amend the function show() like this

function show(which) {
var area = document.getElementById("map").getElementsByTagName("area");
var locations = document.getElementById("hidden").getElementsByTagName("div");

for (var a=0; a < area.length; ++a) {
if(area[a] == which) {
locations[a].style.display="block";
} else {
locations[a].style.display="none";
}
}

The function hide() can then also be removed

Yay! Thank you, thank you, thank you!