I've been working on this for days now, so if you can help I'll be extremely grateful. I want to make a map of the world where the countries change colors when you mouse over them. I can cut out all the country shapes and color them in photoshop, but I'm having trouble with the html, css and javascript. I don't want to use css hover because the hover regions are all rectangles. I'd rather have an irregularly shaped hot spot in the shape of a country and have an image of the same country that's colored differently appear onmouseover, then disappear again onmouseout.

Basically, I need to know how to bring up an image at a specified location when mousing over a hotspot at the same location.

This is as far as I've gotten so far, but (problem 1) the image doesn't appear where the hot spot is and (problem 2) I have the famous flickering problem.

Please help.



<html>
<head>

<style type="text/css">
#map
{
position:absolute;
left:0px;
top:0px;
}
ul.countries{
list-style: none;
}
li.safari{
position: absolute;
left:50px;
top:50px;
display: none;
background-image:url('http://www.w3schools.com/images/compatible_safari.gif');
}
#img
{
position:absolute;
left:0px;
top:0px;
}
#bkgndimg
{
position:absolute;
left:0px;
top:0px;
}
</style>

</head>
<body>

<img id="bkgndimg" src="http://www.w3schools.com/images/w3schoolslogo.gif" >

<div="map">
<img id="img" src="http://www.w3schools.com/images/w3schoolslogo.gif" usemap="#map" name="browser" />

<map name="map">
<area shape="circ" coords="50,50,50" href="#" title="example" onMouseOver="document.browser.src='http://www.w3schools.com/images/compatible_safari.gif'"
onMouseOut = "document.browser.src='http://www.w3schools.com/images/w3schoolslogo.gif'" />
</map>

<ul class="countries">
<li class="safari"><a href="#">Safari</li>
</ul>


</body>
</html>