Ottenere img associato dall'area HTML

Question

Esistono due img che utilizzano la stessa mappa con un'area. Ora leghiamo ad es. un gestore di eventi click nell'elemento area . È possibile determinare dal gestore dell'evento quale istanza dell'immagine è stata selezionata?

Answer 1

Sì, puoi determinare su quale immagine è stato cliccato:

1. allegando un singolo gestore di eventi su un elemento genitore e controllo la proprietà event.target
2. allegando singoli gestori di eventi su ciascun elemento immagine.

Ad esempio, se il tuo HTML è simile a:

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

quindi le possibili soluzioni sono:

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

A seconda di cosa vuoi fare dopo aver catturato l'evento, dovrai restituire "true" per consentire all'URL di seguire o "false" per eseguire un'azione alternativa.

Answer 2

Una possibile soluzione è utilizzare la sua proprietà offsetParent . In questo modo, ottengo il genitore, che è quello di cui avevo bisogno in origine. Anche trovare l'immagine stessa non dovrebbe essere troppo difficile, a condizione che le immagini siano contenute in diverse div s