انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: خرائط الصور في لغة HTML

Area Element in HTML عنصر Area في لغة HTML

في هذا الدرس، ستتعلم كيفية إنشاء خريطة صور تفاعلية باستخدام HTML، مما يسمح لك بوضع روابط متعددة داخل صورة واحدة. سيشمل الدرس: مقدمة لخرائط الصور، وكيفية إعداد <img>، وشرح عنصر <map> و <area> لرسم المناطق التفاعلية بالصورة. بالإضافة إلى ذلك، ستتعرف على حساب إحداثيات الأشكال المختلفة مثل المستطيل والدائرة والمضلع لضمان دقة تحديد هذه المناطق.

1 صفوف تعليمية
لغة HTML
9,826 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

خطوات إضافة عنصر <area> مع عنصر <map>:

1. نقوم بإضافة ثلاثة عناصر من <area> بناءً على عدد العناصر أو المناطق الموجودة في الصورة.

2. نقوم بإضافة خاصية [coords] لكل عنصر من عناصر <area> الثلاثة. تُحدد هذه الخاصية إحداثيات المنطقة على الصورة، لتصبح بهذا الشكل: ["coords="74,165,446,584].

3. نقوم بإضافة خاصية [href] لربط المنطقة بصفحة ويب أو صورة أخرى، ويتم وضع المسار داخل الخاصية.

4. إضافة خاصية [shape] لتحديد نوع الشكل [rect] لتحديد شكل مستطيل، أو [poly] لتحديد شكل متعدد الأضلاع، أو [circle] لتحديد شكل دائري.

من الخصائص الأخرى لعنصر area:

  • Title: لتوفير وصف نصي يظهر عند مرور المستخدم فوق المنطقة.

  • Alt: نص يوضح وجهة المنطقة أو وظيفتها، وهو مطلوب عندما يوجد href.

  • Target: يحدد سياق التصفح المقصود؛ _blank يطلب سياقًا جديدًا، غالبًا تبويبًا.

عنصر area فارغ ولا يكتب له وسم إغلاق. إحداثيات coords تقاس ببكسلات CSS من أعلى يسار الصورة؛ تغيير حجم الصورة يتطلب مراعاة تطابق الإحداثيات مع المناطق المرئية.

Area Element

إضافة عنصر <area> لكل منطقة محدّدة على الصورة.

HTML 
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
  <area>
  <area>
  <area>
</map>

Href Attribute

تُستخدم خاصية [href] لربط كل منطقة في الصورة برابط يؤدي إلى صفحة ويب أو صورة أخرى عند النقر.

HTML 
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
  <area alt="Computer" shape="rect" href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584">
  <area alt="Phone" shape="rect" href="https://www.closetag.com/images/cellphone.jpg" coords="477,400,562,574">
  <area alt="Coffee" shape="circle" href="https://www.closetag.com/images/coffeehouse2.jpg" coords="554,288,90">
</map>

Final Interactive Image Map Example

مثال كامل لخريطة صورة تفاعلية بجميع الخصائص.

HTML 
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="mac" title="mac" href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584" shape="rect">
    <area target="_blank" alt="cellphone" title="cellphone" href="https://www.closetag.com/images/cellphone.jpg" coords="477,400,562,574" shape="rect">
    <area target="_blank" alt="coffee" title="coffee" href="https://www.closetag.com/images/coffeehouse2.jpg" coords="554,288,90" shape="circle">
</map>
جرّب بنفسك

جميع فقرات هذا الدرس (خرائط الصور في لغة HTML)