Question

I’m making an image map of the world map where moving the mouse over different parts of the
world should highlight that part of the world.

I do this by loading images of the different regions into an (initially) empty ‘div’ and positioning them on top of the world map with CSS and absolute positioning. It works well except that the transparent parts of the images that I lay over the world map in some cases cover another area which stops the mouse over events from coming through the layover/highlight image through to the image map.

Is there any way to get the events through to the image map or is should I take a completely different approach?

Any help will be greatly appreciated.

Here is some code to show what I’m doing.
First you see the JavaScript code that replaces the inner HTML code of a ‘div’ with the code for the the image that needs to be loaded to highlight a particular region

<script type="text/javascript">

function highlight_map_area(area)
{
switch(area)
{
    case 1:
        document.getElementById("marker").innerHTML='<img src="/media/img/world_map/canada.png" style="position:absolute; z-index:1; left:53px; top:1px;">'
        // ...
        break;
    // Then all the other case statements ...
}
}
</script>

Here is how I load the image map (with the image of the world map):

<div style="position:relative; float:left; margin:10px;">
   <img src=/media/img/world_map/world_map.png width ="699" height ="357" usemap="#world_map">
   <div id="marker">
   </div>
</div>

And here is the map itself:

<map name="world_map">
   <area shape ="rect" coords ="0,0,210,80" onMouseOver="highlight_map_area(1)" alt="Canada" />
   <!-- All the other regions to be selectable... -->
   <area shape ="rect" coords ="563,240,698,356" onMouseOver="highlight_map_area(8)" alt="Australia and South Pacific" />
</map>

Answer 1

I created a similar application a while ago http://bit.ly/a3BJqA.

Create three states for each region image – default, mouseover and active.
Use css to control the position of each region on the map.

<div id="mapDiv">
    <img src="img_src" name="img1" title="Northern Cape" id="img1">
    <img src="img_src" name="img2" title="Northern Cape" id="img2">
    <img src="img_src" name="img3" title="Northern Cape" id="img3">
    <img src="img_src" name="img4" title="Northern Cape" id="img4">
    <img src="img_src" name="img5" title="Northern Cape" id="img5">
    <img src="img_src" name="img6" title="Northern Cape" id="img5">
    <!-- More images -->
</div>

The JavaScript would look like the function below.

function mapAnimation() {
    var map_images = $$('#mapDiv img'); 

    for (var i = 0; i < map_images.length; i++) {   
        map_images[i].onmouseover = function(){ 
           // mouseover image                     
        };
        map_images[i].onmouseout = function(){                                      
             // default image  
        };
        map_images[i].onclick = function(){ 
           // active image and more actions      
        };                                       
    }
}