انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: خرائط الصور في لغة HTML

Map Element in HTML عنصر map في لغة HTML

في هذا الدرس، ستتعلم كيفية إنشاء خريطة صور تفاعلية باستخدام HTML، مما يسمح لك بوضع روابط متعددة داخل صورة واحدة. سيشمل الدرس: مقدمة لخرائط الصور، وكيفية إعداد <img>، وشرح عنصر <map> و <area> لرسم المناطق التفاعلية بالصورة. بالإضافة إلى ذلك، ستتعرف على حساب إحداثيات الأشكال المختلفة مثل المستطيل والدائرة والمضلع لضمان دقة تحديد هذه المناطق.

1 صفوف تعليمية
لغة HTML
9,826 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
خطوات إنشاء عنصر <map>:


  • نقوم بإنشاء عنصر [map] باستخدام العلامة <map>.

  • عنصر <map> من نوع العناصر المتداخلة [nested element]، حيث له علامة فتح <map> وعلامة إغلاق ⁦</map>⁩.

  • نضيف خاصية ["name="image-map] لعنصر <map>. هذا الاسم يجب أن يتطابق مع الاسم المضاف في خاصية [usemap] لعنصر <img>، وذلك لربط الصورة بالمناطق المحددة.

يجب أن يكون name غير فارغ وفريدًا بين الخرائط، وبلا مسافات. إذا أضفت id إلى map فاجعله مطابقًا لـname. تبدأ قيمة usemap بعلامة #، أما name نفسه فلا يبدأ بها.

Interactive Image Map Using <map> Element

نقوم بإنشاء عنصر خريطة تفاعلية باستخدام عنصر <map> في HTML لربط مناطق تفاعلية بصورة معينة.

Interactive Image Map Using Element

HTML 
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map>

</map>

Name Attribute with Map Element

استخدام خاصية name مع عنصر <map> لكي يتم الربط مع عنصر <img>.

HTML 
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">

</map>

جميع فقرات هذا الدرس (خرائط الصور في لغة HTML)