خريطة الصور

📅 آخر تحديث: ١٧ يوليو ٢٠٢٦
✍️ نُشر في: ١٧ يوليو ٢٠٢٦
📷 يحتوي على 1 صور
الموسوعة الحرة

في لغتي HTML و XHTML ، تُعرَّف خريطة الصورة بأنها قائمة إحداثيات مرتبطة بصورة معينة ، تُنشأ لربط أجزاء من الصورة بوجهات مختلفة (على عكس رابط الصورة العادي، حيث يرتبط كامل جزء الصورة بوجهة واحدة). على سبيل المثال، قد تحتوي خريطة العالم على رابط لكل دولة يُتيح الوصول إلى معلومات إضافية عنها. والهدف من خريطة الصورة هو توفير طريقة سهلة لربط أجزاء مختلفة من الصورة دون الحاجة إلى تقسيمها إلى ملفات صور منفصلة.

جانب الخادم

تم دعم خرائط الصور من جانب الخادم لأول مرة في متصفح Mosaic (متصفح الويب) الإصدار 1.1. [ 1 ] تُمكّن خرائط الصور من جانب الخادم متصفح الويب من إرسال معلومات الموقع إلى الخادم حول مكان نقر المستخدم داخل الصورة. وهذا يسمح للخادم باتخاذ قرارات على مستوى كل بكسل على حدة بشأن المحتوى الذي سيتم إرجاعه كاستجابة (تشمل الطرق الممكنة استخدام طبقات قناع الصورة، أو استعلامات قاعدة البيانات، أو ملفات التكوين على الخادم).

يتطلب كود HTML لهذا النوع من خرائط الصور من جانب الخادم <img>أن يكون الوسم داخل وسم رابط <a>...</a>ويجب <img>أن يتضمن ismapالسمة.

<a href="/imagemapper"> < img src = " image.png " ismap / > </a>​​

عندما ينقر المستخدم داخل الصورة، سيقوم المتصفح بإلحاق إحداثيات X و Y (بالنسبة للزاوية العلوية اليسرى للصورة) بعنوان URL الخاص بالمرساة كسلسلة استعلام وسيصل إلى عنوان URL الناتج [ 2 ] (على سبيل المثال، /imagemapper?3,9).

إذا كان المتصفح لا يدعم ذلك، فيجب عدم إضافة سلسلة الاستعلامismap إلى عنوان URL الخاص بالمرساة ، ويجب على الخادم الاستجابة بشكل مناسب (على سبيل المثال، عن طريق إرجاع صفحة تنقل نصية فقط).

جانب العميل

تم تقديم خرائط الصور من جانب العميل في HTML 3.2 ، وهي لا تتطلب أي منطق خاص للتنفيذ على الخادم (فهي تعمل بالكامل من جانب العميل). كما أنها لا تتطلب أي جافا سكريبت .

لغة HTML خالصة

تتكون خريطة الصور من جانب العميل في لغة HTML من جزأين:

  1. الصورة الفعلية، المضمنة في <img>الوسم. يجب أن يحتوي وسم الصورة على سمة usemap، التي تحدد خريطة الصور المراد استخدامها لهذه الصورة (قد توجد خرائط صور متعددة في صفحة واحدة).
  2. عنصر <map>، وبداخله <area>عناصر أخرى، يُحدد كل منها منطقة قابلة للنقر ضمن خريطة الصورة. يشبه هذا <a> tagتحديد عنوان URL الذي يجب فتحه لرابط ويب عادي. titleيمكن توفير سمة، والتي يمكن عرضها كتلميح عند تحريك مؤشر الماوس فوق المنطقة. لأسباب تتعلق بإمكانية الوصول إلى الويب ، من المهم غالبًا - وفي بعض الحالات قد يكون شرطًا قانونيًا أو تعاقديًا - توفير altسمة تصف الرابط بحيث يمكن لبرامج قراءة الشاشة قراءته، على سبيل المثال، للمستخدمين المكفوفين . [ 3 ]

يمكن أن تكون العناصر <area>مستطيلات ( shape="rect")، أو مضلعات ( shape="poly") أو دوائر ( shape="circle"). قيم الشكل هي أزواج إحداثيات. كل زوج له قيمة X وقيمة Y (من اليسار/أعلى الصورة) ويفصل بينهما فاصلة.

  • المستطيل: حدد أربع إحداثيات: "x1,y1,x2,y2"
  • المضلع: حدد أي عدد من الإحداثيات حسب الرغبة (مضاعفات العدد اثنين): "x1,y1,x2,y2, [...] xn,yn"
  • دائرة: زوج إحداثيات واحد وقيمة أخرى بنصف قطر: "x1,y1,radius"

يُعرّف المثال التالي منطقة مستطيلة ("9,372,66,397"). عندما ينقر المستخدم في أي مكان داخل هذه المنطقة، يتم نقله إلى الصفحة الرئيسية لموقع ويكيبيديا الإنجليزية .

< img src = "image.png" alt = "خريطة الموقع" usemap = "#mapname" /> < اسم الخريطة = "mapname" > < شكل المنطقة = "المستقيم" coords = "9,372,66,397" href = "https://en.wikipedia.org/" alt = "Wikipedia" title = "Wikipedia" /> </ map >

CSS

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

الإنشاء والاستخدام

An unknown portraitunknown paintingprob. The Infant Academy 1782Boswell - BiographerDr Johnson - Dictionary writerSir Joshua Reynolds - HostDavid Garrick - actorEdmund Burke - statesmanPasqual Paoli - Corsican patriotCharles Burney - music historianservant - poss. Francis BarberThomas Warton - poet laureateOliver Goldsmith - writerUse button to enlarge or use hyperlinks
مثال على خريطة صور للنادي . يؤدي النقر على شخص في الصورة إلى تحميل المتصفح للمقال المناسب.

من الممكن إنشاء خرائط صور من جانب العميل يدويًا باستخدام محرر نصوص، لكن ذلك يتطلب من مصممي المواقع الإلكترونية معرفة كيفية برمجة HTML وكيفية تحديد إحداثيات المناطق التي يرغبون في وضعها فوق الصورة. ونتيجة لذلك، فإن معظم خرائط الصور المبرمجة يدويًا عبارة عن مضلعات بسيطة.

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

تُعرّض الخرائط التصويرية التي لا تُوضّح مناطق النقر فيها المستخدم لخطر التصفح غير الواضح . وحتى عند توضيحها، قد لا يكون الوجهة التي تؤدي إليها واضحة. ويمكن معالجة هذا جزئيًا باستخدام تأثيرات التمرير. [ 4 ]

صور SVG

نظرًا لأن تنسيق الصور SVG يوفر آلياته الخاصة لإضافة الروابط التشعبية [ 5 ] وأشكال أخرى أكثر تطورًا من التفاعل [ 6 ] إلى الصور، فإن تقنيات خريطة الصور التقليدية ليست ضرورية بشكل عام عند العمل مع الصور المتجهة بتنسيق SVG.

انظر أيضاً

مراجع

  1. ↑ "WWW-Talk أبريل-يونيو 1993: امتداد IMG لبرنامج Mosaic 1.1" . 1997.webhistory.org . تاريخ الاسترجاع: 21 يناير 2026 .
  2. ↑ "HTML: لغة الترميز (مرجع لغة HTML)" .
  3. ↑ "خرائط الصور في لغة HTML" . إمكانية الوصول . جامعة ولاية بنسلفانيا . تم الاطلاع عليه بتاريخ 6 أكتوبر 2013 .
  4. ↑ فلاندرز، فينسنت (مارس 1998). صفحات الويب السيئة: تعلم التصميم الجيد من خلال النظر إلى التصميم السيئ . سان فرانسيسكو: شركة سايبكس. ISBN 978-0-7821-2187-2.
  5. ↑ "مواصفات SVG: الربط" . اتحاد شبكة الويب العالمية. 16 أغسطس 2011. تم الاطلاع عليه بتاريخ 24 يونيو 2019 .
  6. ↑ "مواصفات SVG: التفاعلية" . اتحاد شبكة الويب العالمية. 16 أغسطس 2011. تم الاطلاع عليه بتاريخ 24 يونيو 2019 .