<area>: عنصر AREA
آخر تحديث: 2026-10-13
<area>عنصر AREA
يعرّف منطقة قابلة للنقر (مستطيل أو دائرة أو مضلع) داخل <map>؛ كل area يحدد الشكل والإحداثيات والرابط الهدف.
| الفئة | الروابط والوسائط |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | ذاتي الإغلاق — لا حاجة لوسم إغلاق |
| الحالة | قياسي |
📝 البنية
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
shape | Region shape: default, rect, circle or poly. | |
coords | Coordinates for the shape, in pixels, comma-separated. | |
href | Target URL when the region is clicked. | |
alt | Alternative text for the region (required for accessibility). | |
target | Where to open the link, e.g. _blank. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <area> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： area عنصر فارغ؛ يجب أن يكون داخل <map> ويُشار إليه عبر usemap في <img>.
❓ الأسئلة الشائعة
Qما وظيفة وسم area؟
A
<area> يعرّف داخل <map> «منطقة نقر ساخنة» في الصورة: يحدد المنطقة عبر shape (rect/circle/poly) وإحداثيات coords، فينقل النقر إلى رابط href. مشاهد كلاسيكية: تقسيم الخريطة للتنقل، ولوحات الأجهزة التفاعلية.Qكيف تُحسب إحداثيات coords في area؟
Aالإحداثيات بكسلات انطلاقًا من الزاوية العليا اليسرى للصورة (0,0):
rect تأخذ زاويتي أعلى-يسار وأسفل-يمين (x,y لكل منهما)؛ وcircle مركز الدائرة x,y مع نصف القطر؛ وpoly سلسلة رؤوس متتالية. قِس من التصميم واملأ مباشرة، وعند تحجيم الصورة لا تتبع المناطق الساخنة تلقائيًا (يلزم JS أو حل srcset).Qهل يجب كتابة alt في area؟
Aإلزامي (عند وجود href). فـ
<area> رابط، وalt هو «نص رابطه» الذي يقرؤه قارئ الشاشة لبيان وظيفة المنطقة. المنطقة بلا alt في صورة جيب معتن للمستخدم ضعيف البصر لا سبيل إليه.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
