علامة <area> في HTML

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

<area> تعريف منطقة الخريطة داخل الصورة (الخريطة هي صورة تحتوي على منطقة قابلة للنقر، أي خريطة استجابة العميل).

<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>

جربها بنفسك

الخصائص

الخصائص القيمة الوصف
alt النص يحدد النص البديل للمنطقة. إذا كان هناك خصائص href فهي ضرورية.
coords قيمة الإحداثيات يحدد إحداثيات المنطقة.
download اسم الملف يحدد ما سيتم تنزيله عند النقر على رابط URL.
href URL يحدد هدف رابط المنطقة.
hreflang رمز اللغة يحدد لغة URL الهدف.
media استعلامات الوسائط يحدد وسيلة الوسائط أو جهاز التشغيل لـ URL الهدف.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 يحدد المعلومات المشاركة مع الرابط.
ال關ية
  • البديل
  • المؤلف
  • البوكنمارك
  • المساعدة
  • الترخيص
  • التالي
  • nofollow
  • noreferrer
  • التحميل المسبق
  • السابق
  • البحث
  • العلامة
 يحدد علاقة مستند الحالي مع URL الهدف.
الشكل
  • default
  • rect
  • circle
  • poly
 يحدد شكل المنطقة.
الهدف
  • _blank
  • _parent
  • _self
  • _top
  • اسم الصندوق
 يحدد أين يفتح URL الهدف.
نوع نوع الوسائط يحدد نوع وسيلة الوسائط لـ URL الهدف.

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

<area> الدوال الداخلية لدعم خصائص العالمية في HTML。

خصائص الحدث

<area> الدوال الداخلية لدعم خصائص الحدث في HTML。

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

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

element {
  display: none;
}

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم