<map>: عنصر MAP
آخر تحديث: 2026-10-13
<map>عنصر MAP
يعرّف خريطة صور من جهة العميل؛ تحدد عناصر <area> الفرعية المناطق القابلة للنقر، وتُربط عبر usemap في <img>.
| الفئة | الروابط والوسائط |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </map> وسم |
| الحالة | قياسي |
📝 البنية
<map name="planet">
<area shape="circle" coords="..." href="...">
</map>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
name | Map name; an |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <map> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： map لا يعرض شيئًا بنفسه؛ يحتاج إلى <img usemap> وعناصر <area> فرعية.
❓ الأسئلة الشائعة
Qبأي عناصر يعمل map؟
A
<map> حاوية المناطق الساخنة، يعمل مع صورة <img usemap='#mapid'> وعدد من <area>: تشير usemap في img إلى name الخاص بـ map (مع #)، وتعرّف area داخل map كل منطقة على حدة. الثلاثة لا غنى عن أي منها.Qما الفرق بين name و id في map؟
Aتشير سمة usemap إلى قيمة
name الخاصة بـ map (وتشترط المواصفة ضبط id مطابق لضمان التوافق). الأسلم كتابة القيمتين متماثلتين: <map name='cn' id='cn'>.Qهل ما زال حل المناطق الساخنة في الصور مستوصى به؟
Aما يزال ذا قيمة في نطاق ضيق (تفاعل الرسوم التوضيحية وخرائط الطراز القديم)، لكن الحل السائد اليوم هو «تراكب عناصر موضعية على الصورة» أو الروابط المدمجة في SVG — فـ SVG متجاوب مع التكبير وقابلية تنسيق مناطقه منفردة وكلفة صيانته أدنى بكثير. قدّم SVG في الصور التفاعلية الجديدة.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
