عنصر <area>

استخدام علامة <area> يتم استخدام علامة <area> لإنشاء مناطق قابلة للنقر فوقها داخل خريطة صورة.

سمات علامة <area>

• alt: نص بديل لصورة الخريطة
• coords: إحداثيات المنطقة القابلة للنقر فوقها
• href: الرابط الذي يتم فتحه عند النقر فوق المنطقة
• shape: شكل المنطقة (مثل المستطيل أو الدائرة)

أمثلة على استخدام علامة <area>

<!-- خريطة عالمية مع مناطق قابلة للنقر فوقها -->
<img src="world-map.png" alt="خريطة العالم">

<map name="world-map">
  <area shape="rect" coords="0,0,100,100" href="europe.html" alt="أوروبا">
  <area shape="rect" coords="100,0,200,100" href="asia.html" alt="آسيا">
  <area shape="rect" coords="200,0,300,100" href="africa.html" alt="أفريقيا">
</map>

استكشاف علامة <area>

لتوضيح استخدام علامة بشكل أفضل، دعنا نستكشف المثال التالي:

<img src="my-image.jpg" alt="صورة" usemap="#map">

<map name="map">
  <area shape="rect" coords="0,0,100,100" href="link1.html" alt="الرابط 1">
  <area shape="circle" coords="200,200,50" href="link2.html" alt="الرابط 2">
</map>

في هذا المثال:

• تم تحديد <img> صورة "my-image.jpg" لاستخدام خريطة تسمى "map".
• تحتوي خريطة "map" على منطقتين قابلتين للنقر فوقهما:
  • مستطيل يمتد من (0,0) إلى (100,100) ويرتبط بـ "link1.html"
  • دائرة بمركز (200,200) ونصف قطر 50 وترتبط بـ "link2.html"

عندما ينقر المستخدم على أي من هذه المناطق، سيتم نقله إلى عنوان URL المرتبط.