العنصر <area>

يُعرِّف العنصر <area> منطقةً في خريطة لصورة، ويمكن أن ترتبط تلك المنطقة (اختياريًا) مع رابط فائق. لا يمكن استخدام هذا العنصر إلا ضمن عنصر <map>.

لمشاهدة مثال متكامل عن استخدام العنصر <area>، راجع صفحة العنصر <map>.

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي.
المحتوى المسموح	لا يوجد، فهو عنصرٌ فارغ.
الوسم المختصر	يجب أن يكون وسم البداية موجودًا، ويجب أن يُحذَف وسم النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي؛ لكن يجب أن يكون العنصر <area> متواجدًا ضمن عنصر <map> لكن لا يُشترَط أن يكون الأب المباشر له.
واجهة DOM	HTMLAreaElement

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

alt

النص البديل الذي سيظهر في المتصفحات التي لا تتمكن من عرض الصور. يجب أن يكون النص كافيًا لكي يمثِّل خيارًا واضحًا للمستخدم كما لو أنَّ الصورة معروضة.

كانت هذه الخاصية مطلوبةً في HTML 4 لكن يمكن أن تكون قيمتها فارغةً ("")؛ لكن في HTML5 أصبحت هذه الخاصية مطلوبة إذا اُستخدمت الخاصية href.

مثال عن استخدام الخاصية alt مع العنصر <area>:

<area shape="rect" coords="0,0,100,100" href="sun.html" alt="Sun">

coords

مجموعة من القيم التي تُحدِّد إحداثيات المنطقة.

عدد ومعنى القيم المذكورة في هذه الخاصية تختلف تبعًا لقيمة الخاصية shape:

• إذا كانت قيمة الخاصية shape تساوي rect (أي مستطيل rectangle)، فقيمة الخاصية coords يجب أن تكون زوجين من إحداثيات x, y. أوّل زوج من الإحداثيات هو لتمثيل الزاوية العلوية اليسرى، بينما الزوج الثاني للزاوية السفلية اليمنى.
• إذا كانت قيمة الخاصية shape تساوي circle (أي دائرة)، فقيمة الخاصية coords يجب أن تكون على شكل x, y, r، حيث تكون x, y هي إحداثيات مركز الدائرة، و r هو نصف قطرها.
• إذا كانت قيمة الخاصية shape تساوي poly (أي مضلع polygon)، فقيمة الخاصية coords يجب أن تكون سلسلة من أزواج الإحداثيات x, y مثل x1, y2, x2, y2, x3, y3 وهلّم جرًا.

كان يُسمَح في HTML 4 أن تكون القيم بواحدة البكسل أو نسبة مئوية (%)؛ لكن أصبحت القيم في HTML5 بالبكسل دومًا.

مثال عن عنصر <area> على شكل مستطيل ودائرة:

<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">

download

تُشير هذه الخاصية -إن وجدت- أنَّ المطوِّر قد وضع الرابط لتنزيل مورد ما. يرجى الرجوع إلى صفحة العنصر لشرحٍ تفصيلي عن الخاصية download.

href

تُحدِّد هذه الخاصية ما هو رابط URL الهدف، ويجب أن تكون القيمة هي رابط URL صحيح.

كان يجب أن تتوافر هذه الخاصية أو خاصية nohref في HTML 4، لكن هذا الأمر تغيّر في HTML5 وأصبح من الممكن حذف هذه الخاصية إن لم يكن يُمثِّل العنصر <area> رابطًا فائقًا.

hreflang

تُشير هذه الخاصية إلى اللغة (البشرية) للرابط المُشار إليه في هذا العنصر، وهذه الخاصية لا وظيفة لها وإنما تستعمل للتنظيم. القيم المسموحة لهذه الخاصية مُعرَّفة في BCP47.

لا تستعمل هذه الخاصية إلا إذا كانت الخاصية href متوافرة.

name

تعريف اسم للمنطقة المُعرَّفة من العنصر <area>، هذه الخاصية موجودة في HTML 4 وأصبحت مهملة.

media

تعطي هذه الخاصية فكرةً عن كيفية تصميم المورد المُشار إليه، فيمكن أن يكون print (أي موجهًا للطباعة) أو screen (أي موجهًا للشاشات الإلكترونية)؛ وإذا لم تُحدَّد قيمة لهذه الخاصية فقيمتها الافتراضية هي all.

لا تستعمل هذه الخاصية إلا إذا كانت الخاصية href موجودة.

هذه الخاصية جديدة في HTML5 ولم تكن موجودةً من قبل.

nohref

تستعمل هذه الخاصية لكي تُشير إلى أنَّ المنطقة المُعرَّفة عبر العنصر <area> لا تمثل رابطًا فائقًا. لا يجوز الجمع بين هذه الخاصية والخاصية href.

ملاحظة: هذه الخاصية أصبحت مهملةً في HTML5، وكل ما يلزم للتصريح أنَّ العنصر لا يمثِّل رابطًا فائقًا هو حذف الخاصية href.

rel

أضيفت هذه الخاصية في HTML5، وتُحدِّد الخاصية ما هي علاقة الرابط المشار إليه مع المستند الحالي، وتأخذ هذه الخاصية أي قيمة أو قيم صالحة لتحديد العلاقة.

لا توجد علاقة افتراضية إن لم تُحدَّد علاقة عبر هذه الخاصية، ولا يجوز استخدام هذه الخاصية إن لم تُستعمَل الخاصية href.

shape

تُحدَّد هذه الخاصية ما هو الشكل المرتبط بالعنصر <area>.

مواصفة HTML5 تسمح باستخدام القيم الآتية:

• rect، لتعريف مستطيل (rectangle)
• circle، لتعريف دائرة
• poly, لتعريف مضلّع (polygon)
• default، للإشارة إلى كامل الخريطة.

لكن تدعم العديد من المتصفحات استخدام الكلمات المحجوزة circ و polygon و rectangle مع هذه الخاصية.

target

كلمة محجوزة تشير إلى المكان الافتراضي لعرض المورد الهدف عندما تُسبِّب الروابط بالانتقال إلى صفحةٍ أخرى.

الكلمات المحجوزة التالية لها معانٍ خاصة:

• ‎__self: عرض النتيجة مكان الصفحة الحالية. هذه هي القيمة الافتراضية إذا لم تُحدَّد قيمةٌ أخرى.
• ‎__blank: عرض الصفحة في نافذة جديدة.
• ‎__parent: ستعرض الصفحة مكان الصفحة الأب التي ينتمي إليها iframe، وإذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__self نفسه.
• ‎__top: عرض الصفحة مكان أعلى صفحة في الهيكلية (أي الصفحة التي تكون من الآباء المباشرين أو غير المباشرين للصفحة الحالية وليس لها صفحة أب). إذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__self نفسه.

type

هذه القيمة تُحدَّد ما هو نوع MIME للرابط الهدف، وهذه القيمة تُوفَّر لإعطاء المتصفح فكرة عن المحتوى. هذه الخاصية مهملة في HTML5.

التنسيق الافتراضي

تخفي أغلبية المتصفحات العنصر <area> بضبط الخاصية display إلى none:

area {
  display: none;
}

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.