-plan de l'image associée à plus d'une image

Question

Disons qu'il ya plusieurs images identiques sur la page, tous associés à la même carte:

<img id="img1" usemap="#my-map" .... > 
<img id="img2" usemap="#my-map" .... > 
<img id="img3" usemap="#my-map" .... > 

<map name="my-map"> 
    <area .... coords=... class="foo"> 
    <area .... coords=... class="bar"> 
</map> 

Il y a un eventhandler mouseover sur chaque zone.

Fom dans le cadre de ces zone Mouseover eventhandlers, à savoir le référencement que les variables qui sont locales à l'événement mouseover de la région, pas de variables globales, est-il possible de savoir quelle image la souris est? Existe-t-il une relation transitoire exposée par le DOM, de sorte que le gestionnaire d'événements mouseover de la zone peut répondre à la question "Quelle image suis-je en train de mapper en ce moment?"

Veuillez exclure la possibilité d'attacher les gestionnaires directement aux images elles-mêmes. Je n'essaie pas de résoudre le problème, mais j'essaie de savoir ce que l'on peut savoir à l'intérieur du gestionnaire d'événements mouseover de la zone, à propos de l'image actuellement associée ou «chaude».

Merci

Answer 1

Vous pouvez utiliser quelque chose comme ça pour trouver l'id.

$('area').bind('mouseover',function(e) { 
    alert(e.fromElement.id); // will alert the ID of the image 
})​; 

Il y a une tonne plus d'informations, vous pouvez obtenir de l'fromElement comme le src, outerHTML etc. Votre meilleur pari est d'utiliser console.log (e); et fouiller avec ce qu'il déverse dans la console en utilisant Google Chrome ou Firebug dans Firefox.

EDIT Cette approche est inconstante au mieux et ne devrait pas être invoquée. Ce qui est disponible dans e semble être déterminé par ce à quoi vous vous liez, et quelle fonction vous obtenez e (clic, mouseover etc).