HTML 영역에서 관련 IMG를 얻습니다

Question

두 가지가있다 IMG 동일하게 사용하는 요소 지도 하나의 영역으로. 이제 우리는 클릭 이벤트 핸들러를 지역 요소. 이벤트 핸들러에서 어떤 이미지 인스턴스를 클릭했는지 확인할 수 있습니까?

Answer 1

예, 어느 이미지를 클릭 한 이미지를 결정할 수 있습니다.

1. 상위 요소에 단일 이벤트 핸들러를 첨부하고 이벤트 검사.
2. 각 이미지 요소에 개별 이벤트 핸들러를 첨부합니다.

예를 들어, HTML이 다음과 같이 보이는 경우

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

그런 다음 가능한 솔루션은 다음과 같습니다.

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

이벤트를 캡처 한 후하고 싶은 일에 따라 URL을 따라갈 수 있도록 'True'또는 대체 조치를 취하기 위해 'false'를 반환해야합니다.

Answer 2

가능한 해결책은 그것의 사용입니다 비교적 재산. 이런 식으로, 나는 부모를 얻습니다. 이것이 내가 원래 필요로하는 것입니다. 이미지 자체를 찾는 것도 너무 어렵지 않아야합니다. 이미지가 다른 상태로 포함되어 있다면 div에스.