Obtenir associé img de la zone HTML

Question

Deux éléments img utilisent la même carte avec une zone. Maintenant, nous lions par exemple un gestionnaire d'événements de clic sur l'élément area . Est-il possible de déterminer à partir du gestionnaire d'événements quelle instance d'image a été cliquée?

Answer 1

Oui, vous pouvez déterminer sur quelle image l'utilisateur a cliqué:

1. attacher un seul gestionnaire d'événement sur un élément parent et inspecter la propriété event.target
2. attacher des gestionnaires d'événements individuels sur chaque élément d'image.

Par exemple, si votre code HTML ressemble à:

<div id="container">
    <img id="myimage1" usemap="theMap" />
    <img id="myimage2" usemap="theMap" />
    <map name="theMap">
    ...
    </map>
</div>

alors les solutions possibles sont:

1)

document.getElementById('container').onclick = function(evt) {
    var target = evt.target || window.event.srcElement;

    switch(target.id) {

        case 'myimage1':
            alert('you clicked on myimage1');
            break;

        case 'myimage2':
            alert('you clicked on myimage2');
            break;

        default:
            // click handler got some other evet
    }
}

2)

document.getElementById('myimage1').onclick = function() {
    alert('you clicked on myimage1');
}
document.getElementById('myimage2').onclick = function() {
    alert('you clicked on myimage2');
}

En fonction de ce que vous souhaitez faire après la capture de l'événement, vous devez renvoyer "true" pour permettre à l'URL de suivre, ou "false" pour effectuer une autre action.

Answer 2

Une solution possible consiste à utiliser sa propriété offsetParent . De cette façon, j'obtiens le parent, ce dont j'avais besoin à l'origine. La recherche de l’image elle-même ne devrait pas être trop difficile, à condition que les images soient contenues dans des div s différentes.