World map with css hover over continents

[PaulaD]

I have used this map (http://ago.tanfa.co.uk/css/examples/europe-map.html) to start me off with the right code, but wanted to use a world map that was coloured until you hover over the continent which then shows as coloured whilst the rest is greyed out.

I have separate images for each rollover which work, but it seems to work well when you hover over, then out of the area and cannot just move from one continent to the other, it seems to get stuck!!!

Can anyone explain, or provide a fix / upgrade my code?

Thanks

Paula

Images:
I have uploaded a couple of the images so you can see, but can only upload 3.

The html:


<ul id="world">
<li id="eu"><a href="#europe">Europe</a></li>
<li id="nam"><a href="#north_smerica">North America</a></li>
<li id="sam"><a href="#south_america">South America</a></li>
<li id="afr"><a href="#africa">Africa</a></li>
<li id="asi"><a href="#asia">Asia</a></li>
<li id="aus"><a href="#australia">Australia</a></li>

</ul>





The css:



#world { width: 170px; height: 100px; background: url(../images/nav/map_world.jpg) no-repeat; margin: 10px auto; padding: 0; position: relative; border: 2px solid #999; z-index:100px;}
#world li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#world a {display: block; text-indent: -999px; text-decoration: none;}


#eu, #eu a {
left: 68px;
top: 0px;
width: 39px;
height: 33px;

}
#nam, #nam a {
left: 13px;
top: 0px;
width: 52px;
height: 46px;
}
#sam, #sam a {
left: 4px;
top: 48px;
width: 47px;
height: 40px;
}
#afr, #afr a {
left: 70px;
top: 38px;
width: 31px;
height: 40px;
}
#asi, #asi a {
left: 114px;
top: 1px;
width: 27px;
height: 38px;
}
#aus, #aus a {
left: 139px;
top: 51px;
width: 30px;
height: 40px;
}





#eu a:hover {position:relative; left: -68px; top: -0px; background: url(../images/nav/map_world_eu.jpg) no-repeat; width: 170px; height: 100px;}

#nam a:hover {position:relative; left: -13px; top: -0px; background: url(../images/nav/map_world_nam.jpg) no-repeat; width: 170px; height: 100px;}

#sam a:hover {position:relative; left: -4px; top: -48px; background: url(../images/nav/map_world_sam.jpg) no-repeat; width: 170px; height: 100px;}

#afr a:hover {position:relative; left: -70px; top: -38px; background: url(../images/nav/map_world_afr.jpg) no-repeat; width: 170px; height: 100px;}

#asi a:hover {position:relative; left: -114px; top: -1px; background: url(../images/nav/map_world_asi.jpg) no-repeat; width: 170px; height: 100px; }

#aus a:hover {position:relative; left: -139px; top: -51px; background: url(../images/nav/map_world_aus.jpg) no-repeat; width: 170px; height: 100px; }

[jscheuer1]

Using a diagnostic tool in Opera I can see (click to enlarge):

3899

It shows how France overlaps Spain. This happens with a number of the other countries, but you have that worked out fairly well for them. But with France and Spain (perhaps others I missed), when the mouse is visually over Spain, if it's still in the section of France that overlaps Spain, it is the French flag in France you will see, not the Spanish flag in Spain. This is due to the order in which the elements appear in the source code. If reversed, the opposite problem would occur. It happens regardless of whether you are moving from France to Spain or the other way, or enter that overlap region from the sea. So it's a little different problem than you said. In order to get around that you need regions that aren't rectangular, like one can have in an image map. However, hover cannot be applied like that to an image map without javascript. Even without an image map one could probably work this out with javascript. An image map would probably make it a bit easier.

Must it be css only? Would you be willing to serve the css only version to non-javascript enabled users and an image map to javascript enabled ones?