العنصر <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.