إضافة علامة إلى صورة في جافا سكريبت؟

Question

هل يعرف أحد كيف يمكنني إضافة علامة إلى صورة (وليس خريطة) في Javascript؟

من الناحية المثالية، أرغب في استخدام معالج يشبه إلى حد كبير إضافة علامة إلى الخريطة - على سبيل المثال.عند النقر يؤدي إلى عرض علامة عند النقطة التي تم النقر فوقها، وإرجاع إحداثيات x/y بكسل للنقطة التي تم النقر فوقها.

هل هذا ممكن؟

هتاف ريتشارد

Answer 1

نعم هذا ممكن.

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

سيكون الأسلوب هو الحصول على عنصر img مع العلامة الخاصة بك، ثم إضافة ملف انقر-معالج للصورة التي تريد استخدامها كـ "خريطة" خاصة بك التحركات العلامة الخاصة بك إلى حيث تم النقر على العنصر.

فيما يلي مثال غير مجرب:

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
$('#map').click(function(e)
{
   $('#marker').css('left', e.pageX).css('top', e.pageY).show();
   // Position of the marker is now e.pageX, e.pageY 
   // ... which corresponds to where the click was.
});
</script>

---

يحرر:وهذا ممكن تمامًا بدون JQuery أيضًا بالطبع.يوجد أدناه مثال على ذلك.

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
document.getElementById('map').onclick = function(e)
{
   with(document.getElementById('marker'))
   {
        style.left = e.pageX;
        style.top = e.pageY;
        style.display = 'block';
   }
   // Here you forward the coordinates e.pageX, e.pageY 
   // ... to whatever function that needs it
};
</script>