خرائط الصور - جعل الصور كروابط لصفحات أخرى  

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

أولاًً - التعامل مع الصورة بأكملها كرابط :

من السهل جداً جعل صورة بكاملها كرابط, فقط قم بإحاطتها بالعنصر ،بالشكل التالي :

أو باستخدام XHTML (لا يوجد أي فرق باستثناء "/") :

هنا عندما تضع مؤشر الماوس على الصورة فسيتحول من سهم إلى إصبع, و إن ضغطت عليها فسوف يأخدك المتصفح إلى الموقع المحدد في العنصر و هو هنا www.devpedia.org, أرأيت هذه البساطة؟!
حسناً, لم ننتهي بعد, بل ربما لم نبدأ بعد!

ثانياًً - التعامل مع الصورة كأجزاء :
المشكلة تكمن في الصور التي تريد التحكم بها كأجزاء :
- هذا الجزء ليس رابط.
- هذا الجزء يأخذ إلى الصفحة الأولى.
- هذا الجزء يأخذ إلى الصفحة الثانية.
و هلم جراً.
يوجد طريقتين لاستخدام هذه التقنية, و التي تسمى Image maps, الأولى و تتم بواسطة المخدم أو السيرفر (و تسمى Server-side image maps) و هي الطريقة الأقدم, و الثانية تتم بواسطة المتصفح نفسه (و تسمى Client-side image maps) و هي الطريقة الأحدث و الأفضل.
في حالة Server-side image maps
1- يضغط المستخدم على مكان من الصورة.
2- يرسل المتصفح طلب إلى السيرفر لمعرفة العنوان الذي يتناسب مع المكان الذي ضغط عليه المستخدم.
3- يقوم السيرفر بتحديد العنوان (إن وجد).
4- إن كانت منطقة فعالة (Hot spot) يرسل السيرفر العنوان المطلوب زيارته إلى المتصفح, و إلا لا يحدث أي شيء!
5- إن استقبل المتصفح أي عنوان يقوم بزيارته.
أما في حالة Client-side image maps, فتتم الخطوات التالية :
1- يضغط المستخدم على مكان من الصورة.
2- يقوم المتصفح بتحديد العنوان (إن وجد).
3- إذا كانت منطقة فعالة يقوم المتصفح بزيارة العنوان المناسب.
و طريقة Server-side image maps نادراً ما تستخدم اليوم بسبب سلبياتها الكثيرة بالنسبة للمطور, و منها :
1- أن المطور يحتاج إلى إعداد سيرفر لتجريب الموقع.
2- يؤدي إلى شغل السيرفر بتحديد عناوين الصفحات المناسبة ثم إرسالها إلى المستخدمين.
و أيضاً بالنسبة للمستخدم :
1- لن يميز المستخدم المنطقة الفعالة من الغير الفعالة إلا بعد أن يقوم بالتجريب بأن يضغط (مثلاًً لن يتغير مؤشر الماوس إلى اصبع عند وضع المؤشر على منطقة فعالة), لأنه عندما يحرك المؤشر على الصورة لن يظهر له شيء إلا إحداثيات مؤشر الماوس عليها X و Y
2- سيؤدي إلى تأخير (بسيط و لكنه مزعج!) في زيارة الصفحات, بسبب انتظار وصول العنوان من السيرفر.
و تمتاز الـ Client-side image maps على Server-side image maps بعدة نواحي :
1- أن المطور لن يحتاج لإعداد سيرفر أثناء تطوير و تجريب الموقع.
2- لن يكون هناك أي عبء على السيرفر (فلن تصله أي طلبات).
3- سيميز المستخدم المنطقة الفعالة من غير الفعالة, لأنه عندما يمرر مؤشر الماوس إلى منطة فعالة, سيتحول شكله من السهم إلى اصبع كما سيتم عرض عنوان الصفحة سابقاً (التي ستتم زيارتها إن ضغط المستخدم على هذه المنطقة).
4- لن تؤدي إلى أي تأخير عند الضغط على إحدى المناطق.
و لكن المشكلة الأساسية في طريقة Client-side image maps هي أنها غير مدعومة في المتصفحات القديمة جداً, و يمكنك حل هذه المعضلة بأن تدعم كلتا الطريقتين في موقعك و إن كنت أجد ذلك غير ضروري.
فلنتكم بالتفاصيل!

1- Server-side بالتفصيل :
يتم ذلك بهذا الشكل (بـ HTML) :

و أما إن كنت تريد استخدام XHTML, فسيكون هناك فرقان بسيطان : الأولى هي إضافة المحرف "/" و الثانية هي استبدال ismap بـ "ismap="ismap" ليصبح الشكل العام بعد التعديل

هنا الخاصية href (في العنصر ) حملت القيمة www.devpedia.org/serversideimagemaps.map و هو عنوان البرنامج أو الخريطة التي سيستخدمها السيرفر لمعرفة عنوان الصفحة المناسب عند إرسال طلب إليه.
يبدو كل شيء بسيط للغاية!, و لكن كما قلت قبل قليل, حاول تجنب استخدام هذا النوع من الـ Image-maps, و إن أردت استعماله فاستعمله بالإضافة إلى النوع الثاني Client-side.

2- Client-side بمزيد من التفصيل :
ببساطة, ضع أي صورة عادية و بدون استخدام العنصر ،و لكن اكتب فيها اسم الخريطة التي تريد استعمالها, مثلاًً :

و ليس من الضروري أن تكون الصورة موجودة في صفحة واحدة مع الخريطة, بل يمكن أن تكونا منفصلتين :

و باستخدام XHTML أضف "/" فقط.
ثم ضع العنصر

لا تنس إضافة "/" إذا كنت تستخدم XHTML.
ملاحظة : ليس من الضروري أن تضع الاسم في الخاصيتين id و name معاً و لكنّي أنصح بذلك لدعم أكبر شريحة ممكنة من المتصفحات.
هناك ثلاث أنواع من الأشكال و هي :مستطيل, دائرة, و مضلع, و في المثال السابق استخدمنا المستطيل, و هذا الجدول يبين طريقة كتابة الإحداثيات لكل شكل :

و بالإضافة إلى الخصائص المشتركة بين العنصرين و
مثل tabindex, title و target, فهناك خاصية إضافية للعنصر
, و هو nohref, فإن كنت تريد تحديد منطقة فعالة, فاستخدم الخاصية href لتحديد العنوان الذي ستتم زيارته عند الضغط عليه, و إن أردتها منطقة غير فعالة و لا تؤدي إلى أي صفحة أخرى عند الضغط عليها فاستخدم nohref في HTML و "nohref="nohref" في XHTML.
ماذا سيحدث إن تقاطع شكلان?!, مثلاًً دائرتان تتقاطعان بحيث توجد منطقة مشتركة بينهما و كل دائرة تؤدي إلى صفحة مختلفة, الشكل الذي أعلنت عنه أولاًً داخل العنصر