الفرق بين المراجعتين لصفحة: «HTML/area»

المراجعة الحالية بتاريخ 11:16، 4 مارس 2018

يُعرِّف العنصر <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.

@@ سطر 4: / سطر 4: @@
 لمشاهدة مثال متكامل عن استخدام العنصر <code><area></code>، راجع صفحة العنصر <code>[[HTML/map|<map>]]</code>.
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 45: / سطر 46: @@
 كانت هذه الخاصية مطلوبةً في HTML 4 لكن يمكن أن تكون قيمتها فارغةً (<code>""</code>)؛ لكن في HTML5 أصبحت هذه الخاصية مطلوبة إذا اُستخدمت الخاصية <code>href</code>.
-==== مثال ====
 مثال عن استخدام الخاصية <code>alt</code> مع العنصر <code><area></code>:<syntaxhighlight lang="html">
 <area shape="rect" coords="0,0,100,100" href="sun.html" alt="Sun">
@@ سطر 59: / سطر 59: @@
 كان يُسمَح في HTML 4 أن تكون القيم بواحدة البكسل أو نسبة مئوية (<code>%</code>)؛ لكن أصبحت القيم في HTML5 بالبكسل دومًا.
-==== مثال ====
 مثال عن عنصر <code><area></code> على شكل مستطيل ودائرة:<syntaxhighlight lang="html">
 <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
@@ سطر 94: / سطر 93: @@
 === <code>rel</code> ===
-أضيفت هذه الخاصية في HTML5، وتُحدِّد الخاصية ما هي علاقة الرابط المشار إليه مع المستند الحالي، وتأخذ هذه الخاصية أي قيمة أو قيم صالحة لتحديد العلاقة.
+أضيفت هذه الخاصية في HTML5، وتُحدِّد الخاصية ما هي [[HTML/Link Types|علاقة الرابط]] المشار إليه مع المستند الحالي، وتأخذ هذه الخاصية أي [[HTML/Link Types|قيمة أو قيم صالحة]] لتحديد العلاقة.
 لا توجد علاقة افتراضية إن لم تُحدَّد علاقة عبر هذه الخاصية، ولا يجوز استخدام هذه الخاصية إن لم تُستعمَل الخاصية <code>href</code>.
@@ سطر 118: / سطر 117: @@
 === <code>type</code> ===
 هذه القيمة تُحدَّد ما هو نوع MIME للرابط الهدف، وهذه القيمة تُوفَّر لإعطاء المتصفح فكرة عن المحتوى. هذه الخاصية مهملة في HTML5.
+== التنسيق الافتراضي ==
+تخفي أغلبية المتصفحات العنصر <code><area></code> بضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>none</code>:<syntaxhighlight lang="css">
+area {
+  display: none;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==