خرائط الصور في HTML
عنصر Picture يختار بين ملفات الصورة. أما خريطة الصورة فتُبقي صورة واحدة وتجعل مناطق منها قابلة للنقر — نقاط ساخنة على مخطط طابق، أو رسم توضيحي، أو قائمة رسومية بسيطة. تربط img يحمل usemap بـ <map> مليء بروابط <area>.
ما هي خريطة الصورة؟
خريطة الصورة ليست تنسيق صورة منفصل. إنها HTML يقول: «هذا المستطيل (أو الدائرة، أو المضلع) على الصورة يجب أن يتصرف كرابط.» المستخدم المبصر ينقر المنطقة؛ والتقنيات المساعدة تحتاج alt واضحًا على كل area لأنه قد لا يوجد نص مرئي بجانب النقطة الساخنة.
إجابة مباشرة
- أضف
usemap="#mapname"علىimg. - أضف
<map name="mapname">مع عنصر<area>واحد أو أكثر. - كل
areaيحتاجshapeوcoordsوhrefوaltالخاص به.
يجب أن يطابق#فيusemapقيمةnameللخريطة (دون اختراع إملاء ثانٍ).
قيم shape بنظرة سريعة
📊 قيم shape لـ area
| shape | المعنى |
|---|---|
| rect | مستطيل — coords: يسار، أعلى، يمين، أسفل |
| circle | دائرة — coords: مركزX، مركزY، نصف القطر |
| poly | مضلع — قائمة نقاط x,y بالترتيب |
خريطة مستطيلة بسيطة
نقطتان ساخنتان على تخطيط مكتب تكفيان لتعلّم التوصيل: usemap، وname المطابق، ومستطيلات area مع نص alt صادق.
نقاط ساخنة مستطيلة بسيطة
html<img src="images/desk.png" alt="Desk layout" usemap="#deskmap" width="400" height="200">
<map name="deskmap">
<area shape="rect" coords="20,30,120,100" href="lamp.html" alt="Lamp">
<area shape="rect" coords="200,40,320,120" href="monitor.html" alt="Monitor">
</map>قراءة المثال
usemap="#deskmap"على الصورة يشير إلى الخريطة المسماةdeskmap- كل
areaرابط:hrefهو الوجهة، وaltيسمّي النقطة الساخنة coordsلـrectهي يسار، أعلى، يمين، أسفل في شبكة بكسل الصورةaltالخاص بالصورة («Desk layout») يصف الرسم كله؛ وalt المناطق تسمّي المناطق
كيف تعمل الإحداثيات
تُقاس الإحداثيات ببكسلات CSS للصورة كما تُعرض للخريطة. إذا وضعت width وheight على img، فابقِ coords متسقة مع ذلك الحجم المعروض أثناء التعلّم. الأرقام الخاطئة تنتج نقاطًا ساخنة تفوت الأجسام المرسومة — فشل صامت شائع.
عادات إمكانية الوصول
كل area قابل للنقر يحتاج alt ذا معنى. لا تترك النقاط الساخنة بلا اسم. فضّل الخرائط التي يكون غرض كل منطقة فيها واضحًا. إذا احتاج التصميم سلوكًا متجاوبًا معقدًا، كثير من الفرق تنتقل إلى SVG مع روابط أو أزرار منفصلة بدل خرائط بكسل هشة.
متى تساعد الخرائط — ومتى لا
تساعد الخرائط لمخطط واحد بعدة مناطق مستقرة. تصبح مزعجة عندما تتوسع الصورة بحرية عبر نقاط توقف كثيرة، لأن coords الكلاسيكية لا تعيد كتابة نفسها تلقائيًا. لواجهات متجاوبة حديثة، فكّر في صور مرتبطة منفصلة، أو تخطيط CSS، أو SVG. ومع ذلك، معرفة خرائط الصور تفيد عندما ترث صفحات قديمة أو عروضًا تعليمية بسيطة.
circle وpoly (ملاحظة سريعة)
circle يستخدم المركز ونصف القطر. poly يسرد أزواج x,y حول شكل حر. ابدأ بـ rect حتى يصبح اقتران usemap / name طبيعيًا، ثم جرّب أشكالًا أخرى على رسمة تمرين.
تمرّن في محررك
- استخدم صورة عريضة بسيطة بمنطقتين واضحتين.
- أنشئ
mapبمنطقتيrectتربطان بصفحتي تمرين صغيرتين. - طابق
usemap="#name"معmap name="name"بعناية (بما في ذلك#). - انقر كل منطقة وتأكد من التنقل.
- اكسر تطابق الاسم مرة، راقب النقاط الساخنة الميتة، ثم أصلحها.
- حسّن أي
areaيقولaltفيها فقط «link».
أخطاء سهلة
- عدم تطابق
usemap/name(نسيان#علىusemapأو إعادة تسمية طرف واحد فقط) - غياب
altعلى كلarea - coords لا تطابق حجم الصورة الحقيقي أو مواضع الأجسام
- الاعتماد على خرائط الصور لتخطيطات متجاوبة شديدة السيولة دون خطة
- وضع الوصف الوحيد على
imgوترك المناطق بلا تسمية
ملخص
- خرائط الصور تربط
img+usemap+map+area - الأشكال تشمل
rectوcircleوpoly - كل area يحتاج
hrefوaltوshapeوcoords - أبقِ الأسماء متطابقة وcoords صادقة
- لواجهات متجاوبة معقدة، فكّر في بدائل حديثة — وما زال تعلّم الخرائط مفيدًا للإرث والمخططات البسيطة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى