الكورس

Advertisements

HTML Image Maps


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


 

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


 

HTML Image Maps

 

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

 

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

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

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

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

عادةً ما تكون المناطق القابلة للتحديد عبارة عن روابط لصفحات أخرى.

 

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

مثال للتوضيح

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

Desktop for coding screen laptop Headphone
<img src="/images/desktop_prog.jpg" alt="Desktop for coding" usemap="#image_map">                
<map name="image_map">
    <area href="screen.html" coords="11,30,330,208" shape="rect" alt="screen">
    <area href="laptop.html" coords="486,355,289,316,339,248,349,143,529,159,525,262" shape="poly" alt="laptop">
    <area href="headphone.html" coords="71,293,45" shape="circle" alt="Headphone">
</map>
Desktop for coding screen laptop Headphone

 

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

 

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

 

إذا لاحظت فى المثال التوضيحى السابق؛ إستخدمنا 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">

لاحظ قيمة السمة usemap تبدأ بعلامة التجزئة # يليها اسم خريطة الصورة.


 

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

 

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

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

 

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

 

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

 

الأشكال – Shapes

 

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

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

 

هناك قيمة افتراضية default تقوم بتحديد المنطقة بأكملها.


 

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

 

ولكى تتمكن من وضع المنطقة القابلة للنقر على الصورة يجب عليك تحديد إحداثيتها؛ لأن قيم الشكل 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”.

 

إذا واجهتك صعوبة فى تحديد إحداثيات الأشكال وخاصًا الـ poly، يمكنك إستخدام هذا الموقع Image map generator سيساعدك بشكل كبير فى تحديد الإحداثيات بسهولة.


 

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

 

 


 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Image Maps” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements