تسمية <map> في HTML

  • الصفحة السابقة <main>
  • الصفحة التالية <mark>

التعريف والاستخدام

<map> علامة لتحديد خريطة الصور. خريطة الصور (image map) هي نوع من الرسوم البيانية التي تحتوي على مناطق قابلة للنقر.

<map> العنصر يحتاج إلى سمة name، هذه السمة مرتبطة بـ <img> العنصر من سمة usemap مربوط، لإنشاء علاقة بين الصورة و الخريطة.

<map> يحتوي على بعض <area> العنصر، يحدد منطقة النقر في خريطة الصور.

انظر أيضًا:

دليل DOM HTML:مفهوم الخريطة

مثال

مثال 1

خريطة صور تحتوي على منطقة قابلة للنقر:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

جرب بنفسك

مثال 2

صورة أخرى تحتوي على منطقة قابلة للنقر من نوع خريطة الصور:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

جرب بنفسك

الخصائص

الخصائص القيمة الوصف
name اسم الخريطة مطلوب. يحدد اسم خريطة الصور.

خصائص العالمية

<map> يدعم العلامة خصائص العالمية في HTML.

خصائص الحدث

<map> يدعم العلامة خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض ما يلي كقيم افتراضية <map> العنصر:

map {
  display: inline;
}

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <main>
  • الصفحة التالية <mark>