Propagation d'un événement Javascript avec une carte-image

Question

Je crée une carte-image de la carte du monde où le déplacement de la souris sur différentes parties du monde devrait mettre en évidence cette partie du monde. Je le fais en chargeant des images des différentes régions dans un 'div' (initialement) vide et en les positionnant au sommet de la carte du monde avec le positionnement css et absolu. Cela fonctionne bien sauf que les parties transparentes des images que je pose sur la carte du monde dans certains cas couvrent une autre zone qui empêche la souris sur les événements de passer à travers l'image de survol/surlignage à travers la carte image.

Y a-t-il un moyen de faire passer les événements à l'image ou est-ce que je devrais adopter une approche complètement différente?

Toute aide sera grandement appréciée.

Voici un code pour montrer ce que je fais. D'abord, vous voyez le code javascript qui remplace le code HTML interne d'un « div » avec le code de la l'image qui doit être chargé de mettre en évidence une région particulière

<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> 

Voici comment je charger la carte d'image (à l'image de la carte du monde)

<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> 

Et voici la carte elle-même

<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

J'ai créé a similar application un certain temps il y a http://bit.ly/a3BJqA.

Créez trois états pour chaque image de région: par défaut, survol et actif. Utilisez css pour contrôler la position de chaque région sur la carte.

<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> 

Le JavaScript aurait l'apparence de la fonction ci-dessous.

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  
     };          
    } 
}