HTML Image Maps

---

عن طريق HTML Image Maps (خرائط الصور)؛ يمكنك إنشاء مناطق قابلة للنقر على الصورة، حيث توفر طريقة سهلة لربط أجزاء مختلفة من الصورة دون تقسيم الصورة إلى ملفات صور منفصلة.

---

 

شاهد هذا الفيديو القصير لترى كيف تعمل خريطة الصورة:

---

 

HTML Image Maps

 

التعريف والإستخدام

 

خريطة الصورة هي صورة مقسمة إلى مناطق قابلة للنقر، يمكن تحديد مناطقها بواسطة الوسم <area> الذى يتيح للمستخدم بالتفاعل معها.

يتم تحديد خريطة الصورة بمجموعة معينة من الإحداثيات داخل الصورة والتي تعمل كمناطق ارتباط تشعبي hyperlink إلى وجهات مختلفة.

الغرض من خريطة الصورة هو توفير طريقة سهلة لربط أجزاء مختلفة من الصورة دون تقسيم الصورة إلى ملفات صور منفصلة.

الفكرة الأساسية وراء خريطة الصورة هي أنك تجمع بين الصورة و المكان الذي تنقر عليه في الصورة + إستخدام بعض تعليمات HTML البرمجية التي تصف المناطق القابلة للنقر.

 

انقر فوق (اللابتوب – الشاشة – السماعات) فى الصورة الموضحة فى مخرجات (outputs) المثال التالى لترى كيف تعمل خريطة الصورة:

 

توضيح تفصيلى لخريطة الصورة على المثال التوضيحى السابق:

 

العناصر المستخدمة فى إنشاء خرائط الصور

 

إذا لاحظت فى المثال التوضيحى السابق؛ إستخدمنا 3 عناصر HTML:

1. <img>: يٌستخدم لتحديد الصورة التي سيتم تضمينها في الخريطة.
2. <map>: يٌستخدم لإنشاء خريطة الصورة للمناطق القابلة للنقر.
3. <area>: يٌستخدم داخل الوسم <map> لتحديد المناطق القابلة للنقر.

 

إذن لكى تنشأ خريطة صورة قابلة للنقر يجب عليك إستخدام الثلاث عناصر السابقة معًا!

 

---

 

خطوات إنشاء خريطة صورة

 

1. الصورة

 

نستخدم الوسم <img> لتحديد الصورة التي سيتم تضمينها في الخريطة، بنفس السمات الخاصة بها (src و alt). ولكن لكى ننشأ علاقة بين الصورة وخريطة الصورة نقوم بإضافة سمة usemap:

<img src="/images/desktop_prog.jpg" alt="Desktop for coding" usemap="#image_map">

---

 

2. إنشاء خريطة الصورة

 

لإنشاء خريطة الصورة نستخدم الوسم <map>، مع إستخدام السمة name (ويجب أن تحتوي قيمة هذه السمة على نفس قيمة سمة الـ usemap):

<map name="image_map">....</map>

---

 

3. تحديد إحداثيات المناطق التي تريد تعيينها

 

لتحديد إحداثيات المناطق القابلة للنقر نستخدم الوسم <area>.

 

الأشكال – Shapes

 

يجب تحديد شكل المنطقة القابلة للنقر، ويمكنك اختيار إحدى هذه القيم:

1. (“shape= “rect) لتحديد منطقة على شكل مستطيل.
2. (“shape= “circle) لتحديد منطقة على شكل دائرة.
3. (“shape= “poly) لتحديد منطقة على شكل مضلع.

 

---

 

تحديد إحداثيات الأشكال

 

ولكى تتمكن من وضع المنطقة القابلة للنقر على الصورة يجب عليك تحديد إحداثيتها؛ لأن قيم الشكل shape عبارة عن أزواج من الإحداثيات وكل زوج له قيمة أحدهما للمحور X والآخر للمحور Y (من اليسار / أعلى الصورة) ويفصل بينهما بفاصلة ( , ).

 

المستطيل – Rectangle

 

لتحديد إحداثيات المستطيل قم بتعيين أربعة إحداثيات (x1, y1, x2, y2)، كالتالى:

<area href="screen.html" coords="11,30,330,208" shape="rect" alt="screen">

قيمة الإحداثيات coords السابقة “11,30,330,208” تعنى بأن هناك إحداثيات تقع على بعد:

• 11px من المسافة اليسرى.
• 30px من المسافة العلوية.
• 330px من المسافة اليسرى.
• 208px من المسافة العلوية.

 

الإحداثيات “11,30,330,208” هي المنطقة التفاعلية التي ستصبح قابلة للنقر وسوف ترسل المستخدم إلى صفحة “screen.html”.

 

---

 

الدائرة – Circle

 

لتحديد إحداثيات الدائرة قم بتعيين زوج إحداثي (x1, y1) وقيمة أخرى لنصف قطر، كالتالى:

<area href="headphone.html" coords="71,293,45" shape="circle" alt="Headphone">

قيمة الإحداثيات coords السابقة “71,293,45” تعنى بأن هناك إحداثيات تقع على بعد:

• 71px من المسافة اليسرى.
• 293px من المسافة العلوية.
• 45px : تحدد قيمة نصف القطر.

 

الإحداثيات “71,293,45” هي المنطقة التفاعلية التي ستصبح قابلة للنقر وسوف ترسل المستخدم إلى صفحة “headphone.html”.

 

---

 

الضلع – Polygon

 

لتحديد إحداثيات أضلاع عيّن العديد من الإحداثيات (xn, yn) كما تريد (x1, y1, x2, y2, x3, y3,…etc)، كالتالى:

<area href="laptop.html" coords="486,355,289,316,339,248,349,143,529,159,525,262" shape="poly" alt="laptop">

الإحداثيات “486,355,289,316,339,248,349,143,529,159,525,262” هي المنطقة التفاعلية التي ستصبح قابلة للنقر وسوف ترسل المستخدم إلى صفحة “laptop.html”.

 

---

 

أمثلة على خريطة الصورة – Image map

 

• المثال الأول: HTML Image Maps Example 1.
• المثال الثانى: HTML Image Maps Example 2.

 

---