HTML - Image Maps (خرائط الصور)

🗺️ HTML Image Maps (خرائط الصور)

خرائط الصور (Image Maps) تسمح لك بربط أجزاء مختلفة من الصورة بروابط مختلفة باستخدام عنصر <map> و<area>.

---

✅ كيف تعمل خريطة الصورة؟

لربط صورة بخريطة، نستخدم الخاصية usemap في عنصر <img>، ونربطها بـ <map name="mapname"> حيث يتم تحديد المناطق باستخدام <area>.

---

🧪 مثال عملي:

<img src="world-map.jpg" alt="World Map" usemap="#worldmap" width="600" height="400">

<map name="worldmap">
  <area shape="rect" coords="34,44,270,350" alt="USA" href="usa.html">
  <area shape="circle" coords="337,300,44" alt="Brazil" href="brazil.html">
  <area shape="poly" coords="290,172,333,250,300,330,270,250" alt="Africa" href="africa.html">
</map>

⬅ هذا المثال يربط كل منطقة في الصورة برابط مختلف باستخدام أشكال متعددة:

• rect: مستطيل
• circle: دائرة
• poly: مضلع

---

📌 شرح الخصائص:

• usemap="#id": يربط الصورة بخريطة محددة بالاسم.
• <map name="id">: يحتوي على عناصر <area> لتحديد الروابط.
• shape: يحدد شكل المنطقة (rect - circle - poly).
• coords: يحدد الإحداثيات الخاصة بالمنطقة.
• href: الرابط الذي يتم فتحه عند النقر.
• alt: نص بديل عند تمرير المؤشر أو عدم عرض الصورة.

---

🎯 نصائح إضافية:

• يمكنك استخدام أدوات أونلاين لتحديد الإحداثيات بسهولة مثل Image Map Generator.
• استخدم دائمًا نصوص alt لتحسين الوصولية.

🖼️ تُعد خرائط الصور أداة رائعة لتقسيم الصورة إلى روابط تفاعلية دون الحاجة لتقسيم الصورة فعليًا.