يمكنك في لغة HTML وضع أكثر من link رابط داخل image صورة واحدة، ويتم ذلك باستخدام image maps خرائط الصور، وهي عبارة عن صورة واحدة مقسمة إلى عدّة مناطق، حيث يتم تحديد مناطق معينة في الصورة لتصبح links روابط، كل رابط يمكن النقر عليه، ويؤدي إلى صفحة معينة أو صورة معينة ومختلفة.

عن طريق image maps يمكنك إنشاء صور مربوطة بعدّة صفحات ويب، كل جزء في الصورة له رابط صفحة ويب مختلف أو رابط صورة مختلفة.
عنصر <map> هو الذي يصنع صور ذات روابط متعددة، ويحتوي بداخله على عنصر <area> لجعل كل نقرة على أي جزء من أجزاء الصورة تنقلك لصفحات مختلفة أو صور مختلفة.

</> Image map syntax in HTML
طريقة كتابة عنصر image map في لغة HTML

لتقسيم image الصورة إلى عدّة مناطق نستخدم العنصر <map>.
ولتحديد المناطق القابلة للضغط نستخدم العنصر <area> بداخل العنصر <map>.
ولإضافة الصورة نستخدم العنصر <img> بحيث نربطه بالعنصر <map>.

خطوات كتابة image map:

نقوم بإنشاء صورة باستخدام عنصر <img> ونضع مسار الصورة، حيث يجب اختيار صورة تحتوي أكثر من عنصر، كما في الصورة العلوية لأنها تحتوي على جهاز كمبيوتر + هاتف + قهوة.
نقوم بإنشاء عنصر <map> من نوع nested elements العناصر المُتداخلة، له open tag علامة بداية وله close tag علامة إغلاق.
نستخدم خاصية name لعنصر map ونقوم بإضافة اسم، مثل: image-map لتصبح بهذا الشكل: <map name="image-map"></map>.
نربط الصورة <img> بالخريطة عن طريق خاصية usemap ونكتب اسم القيمة التي قمنا بتحديدها داخل map لتصبح بهذا الشكل: "usemap="#image-map
نقوم بإضافة ثلاث مناطق، للثلاث عناصر داخل الصورة، عن طريق استخدام عنصر <area> حيث يكون كل عنصر مرسوم في الصورة له area منفصل.
يحمل عنصر area خاصية coords التي نكتب بداخلها الإحداثيات الخاصة بمكان العنصر المرسوم على الصورة، كما يمكنك استخدام موقع www.image-map.net لحساب الإحداثيات تلقائياً.
ويحمل عنصر area أيضاً خاصية href التي نضع بداخلها رابط صفحة الويب أو الصورة التي سيتم الذهاب إليها عند النقر على أي عنصر.

</> img element in HTML
عنصر الصورة في لغة HTML

نقوم بإنشاء صورة باستخدام عنصر <img> ونضع مسار الصورة، حيث يجب اختيار صورة تحتوي أكثر من عنصر، مثل الصورة العلوية التي تحتوي على: جهاز كمبيوتر + هاتف + قهوة.

خطوات بناء عنصر الصورة مع image map:

إضافة عنصر img.
إضافة خاصية src لإضافة مسار الصورة.
إضافة خاصية usemap لنربط الصورة بالمناطق areas الموجودة داخل عنصر map وهو الاسم الذي يُحدد داخل خاصية name لعنصر map.

img element

طريقة إضافة عنصر img.

<img>

src attribute

إضافة خاصية src لإضافة مسار الصورة.

<img src="https://www.closetag.com/images/place.jpg">

usemap attribute

إضافة خاصية usemap لربط الصورة بـ areas المناطق الموجودة داخل عنصر map وهو الاسم الذي يُحدد داخل خاصية name لعنصر map.

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

ملاحظات هامة

لا تنسى علامة hash # قبل الاسم داخل خاصية usemap داخل عنصر img.

</> Map element in HTML
عنصر map في لغة HTML

الخطوات إنشاء عنصر map:

نقوم بإنشاء عنصر map عن طريق علامة <map>.
عنصر <map> من النوع nested element له open tag علامة بداية وله close tag علامة نهاية.
إضافة خاصية "name="image-map التي تضاف بعد علامة # في خاصية usemap لعنصر img.

map element

نقوم بإنشاء عنصر map عن طريق علامة <map>.

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

<map>

name attribute with map element

استخدام خاصية name مع عنصر <map> لكي يتم الربط مع عنصر img.

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

<map>

ملاحظات هامة

يكتب الاسم بداخل خاصية name بدون علامة #.

</> Area element in HTML
عنصر area في لغة HTML

خطوات إضافة عنصر area:

نقوم بإضافة ثلاث عناصر من area بناء على عدد العناصر أو المناطق الموجودة في الصورة.
نقوم بإضافة خاصية coords لكل عنصر من العناصر الثلاثة area كلاً حسب منطقته على الصورة، ليصبح بهذا الشكل "coords="74,165,446,584.
نقوم بإضافة خاصية href لكي نربط المنطقة بصفحة ويب أو صورة ثم نضيف بداخل الخاصية المسار.
إضافة عنصر shape لتحديد نوع الشكل إما rect يحدد شكل مستطيل أو poly يحدد منطقة متعددة الأضلاع أو circle يحدد شكل دائري.
(اختياري) يمكن إضافة ثلاث خصائص اختيارية وهي title و alt و target لفتح الصورة في نافذة جديدة.

area element

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

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

href attribute

يوجد لكل منطقة أو عنصر داخل الصورة رابط لصفحة ويب أو صورة ثانية، وذلك لكي يقوم المتصفح بنقل المستخدم عند النقر عليها.

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

Final image maps

المثال كامل بجميع العناصر وبجميع الخصائص.

<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>

جربها بنفسك

</> How are coords rect values calculated ؟
كيف يتم احتساب قيمة rect coords احداثيات المستطيل ؟

طريقة احتساب أبعاد العناصر المستطيلة على الصور:

تأتي إحداثيات الشكل = "rect" في أزواج ، أحدهما للمحور x والآخر للمحور y. إحداثيات الخاصية shape من النوع rect يتم إضافة قيميتين بداخلها.

القيمة الأولى تنقسم إلى جزءين، هما:

الجزء الأول يكون بعد بداية العنصر من الصورة من جهة اليسار + بعد بداية العنصر من أعلى الصورة 74,165.
الجزء الثاني يكون بعد نهاية العنصر من جهة اليسار + بعد نهاية العنصر من أعلى الصورة 446,584.

لتصبح في النهاية بهذا الشكل "coords="74,165,446,584

React shape

احتساب قيمة x وقيمة y للصور react shape المستطيلة.

<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">
</map>

جربها بنفسك

</> ? How are coords circle values calculated
كيف يتم احتساب قيمة circle coords الدائرة ؟

احتساب أبعاد circle shape العناصر الدائرية على الصور:

يتم احتساب الشكل الدائري عن طريق تحديد نقطة مركز الدائرة أولاً، ثم تحديد نصف قطر الدائرة.

وسيكون موقع نقطة مركز الدائرة في هذا المثال:

على بعد 554 ( px ) بيكسل، من الجانب الأيسر للصورة.
على بعد 288 ( px ) بيكسل، من الجانب العلوي للصورة.

وتكون قيمة نصف قطر الدائرة هي 90 ( px ) بيكسل.

Circle shape

احتساب قيمة x وقيمة y للصور circle shape الدائرية.

<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">
</map>

جربها بنفسك

</> ? How are coords poly values calculated
كيف يتم احتساب قيمة poly coords متعدد الأضلاع ؟

لإنشاء شكل ( متعدد الأضلع ) سنختار القيمة [ poly ] بداخل الخاصية shape.

أما بالنسبة للخاصية coords سنحتاج لتحديد جميع نقاط الأضلع للشكل المراد إنشائه وبهذا نستطيع إنشاء أي شكل ممكن.

وفي هذا المثال سنحتاج لإنشاء شكل الكرواسون عن طريق تحديد إحداثيات العديد من النقاط وكل نقطة سوف تتكون من زوج من الإحداثيات ليكون:

الرقم الأول هو إحداثي المحور الأفقي ( x ) .
الرقم الثاني هو إحداثي المحور الرأسي ( Y ) .

حيث سنقوم بتحديد عدّة نقاط حول الشكل ( الكرواسون ) من مختلف الزوايا وكل نقطتين ستكونان على خط مستقيم من أجل أن نقوم بربط جميع النقاط بعضها ببعض.

Poly shape

احتساب قيمة x وقيمة y للصور poly shape متعددة الأضلاع.

<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">
</map>

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Image Maps
خرائط الصور في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Image Maps HTML