HTML map Tag

HTML map Tag – يُستخدم الوسم <map> مع عناصر الـ <area> لتحديد خريطة صورة (هي صورة بها مناطق قابلة للنقر).

HTML map Tag

مثال للتوضيح

شغل إيدك

مثال توضيحى لترى كيف تعمل خريطة الصورة:

<img src=“/images/desktop_prog.jpg” alt=“Desktop for coding” usemap=“#image_map”>

<map name=“image_map”>

<area href=“screen.html” coords=“11,30,330,208” shape=“rect” alt=“screen”>

<area href=“laptop.html” coords=“486,355,289,316,339,248,349,143,529,159,525,262” shape=“poly” alt=“laptop”>

<area href=“headphone.html” coords=“71,293,45” shape=“circle” alt=“Headphone”>

</map>

<img src=”/images/desktop_prog.jpg” alt=”Desktop for coding” usemap=”#image_map”> <map name=”image_map”> <area href=”screen.html” coords=”11,30,330,208″ shape=”rect” alt=”screen”> <area href=”laptop.html” coords=”486,355,289,316,339,248,349,143,529,159,525,262″ shape=”poly” alt=”laptop”> <area href=”headphone.html” coords=”71,293,45″ shape=”circle” alt=”Headphone”> </map>

<img src="/images/desktop_prog.jpg" alt="Desktop for coding" usemap="#image_map">                
<map name="image_map">
    <area href="screen.html" coords="11,30,330,208" shape="rect" alt="screen">
    <area href="laptop.html" coords="486,355,289,316,339,248,349,143,529,159,525,262" shape="poly" alt="laptop">
    <area href="headphone.html" coords="71,293,45" shape="circle" alt="Headphone">
</map>

السمات المحددة – Specific Attributes

السمة المطلوبة المخصصة للوسم <map>:

السمات العامة – Global Attributes

الوسم <map> يدعم السمات العامة أيضًا، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.

سمات الحدث – Event Attributes

يدعم الوسم <map> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.

إقرأ أيضًا – HTML <map> Tag

للمزيد من المعلومات شاهد فصل: HTML Image Map.

الوسوم المتعلقة: <area> – <img> – <a>.

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

مدعوم	مدعوم	مدعوم	مدعوم	مدعوم