الحصول على IMG المرتبطة من منطقة HTML

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 بالمتابعة ، أو "خطأ" لاتخاذ إجراء بديل.

Answer 2

الحل المحتمل هو استخدامه إزاحة منشأه. بهذه الطريقة ، أحصل على الوالد ، وهو ما احتاجه في الأصل. يجب أن يكون العثور على الصورة نفسها أيضًا أمرًا صعبًا للغاية ، شريطة أن تكون الصور موجودة بشكل مختلف divس.