خريطة الصور باستخدام وسوم map وarea في HTML
في درس جديد من كورس تعلم HTML من الصفر، هنتعلم ازاي نعمل خريطة تفاعلية على صورة بحيث الناس يقدروا يضغطوا على أجزاء معينة منها ويتوجهوا لصفحات أو أقسام معينة. التقنية دي بتزيد من تفاعل المستخدم وتجعل تصميم صفحات الويب أكثر احترافية.
إيه هي خريطة الصور؟
خريطة الصور بتخليك تحدد مناطق معينة داخل الصورة وتخليها قابلة للنقر، وده بيتم عن طريق عنصرين أساسيين:
- <map>: عنصر بيحتوي على تعريف المناطق.
- <area>: بيحدد كل منطقة، وشكلها، وإحداثياتها، والرابط اللي بيتوجهله.
ربط الصورة بالخريطة
لما نقدم الصورة، بنستخدم وسم <img> وبنضيف ليه attribute
اسمه usemap، وبنخلي قيمته "#اسم_الخريطة". بالشكل ده:
<img src="image.jpg" alt="صورة توضيحية" usemap="#mapname">بعد كده في نفس الصفحة بنضيف:
<map name="mapname">
... وسوم ...
</map>الاسم هنا لازم يكون متطابق مع ما حطيناه في usemap.
أنواع الأشكال
في ٣ أشكال رئيسية تحدد بيها منطقتك التفاعلية:
- rect: مستطيل. بتحدد 4 أرقام تمثل الزاويتين المتقابلتين.
- circle: دائرة. بتحدد مركزها ونصف قطرها.
- poly: مضلع. بتحدد مجموعة نقاط بكل زوج إحداثيات.
المثال العملي هيكون داخل الكود، لكن الفكرة إن كل منطقة ارتيح فيها بيسهل التنقل للمستخدم.
إضافة أحداث JavaScript
لو عايز تنفذ كود JavaScript لما يضغطوا على المنطقة، ممكن تضيف
onclick="myFunction()" في وسم <area>. بعدها
تكتب:
<script>
function myFunction(){
alert("انت ضغطت على المنطقة المحددة");
}
</script>تطبيق عملي لخريطة الصور
هنستخدم صورة للوحة عمل فيها كذا منطقة تقدر تضغط عليها:
- المنطقة بتاعة الكمبيوتر.
- المنطقة بتاعة التليفون.
- ومنطقة الكوب.
هنحدد كل واحدة بشكل مختلف حسب مكانها وحجمها.
أهمية خريطة الصور في التصميم
- بتخلي الصورة جزء تفاعلي في الصفحة.
- بتزود تجربة المستخدم وتخلي الموقع أعرض.
- مفيدة في الخرائط، التصاميم، الشروحات التفاعلية.
نصايح مهمة
- اختار إحداثيات دقيقة بحيث المستخدم يقدر يضغط بسهولة.
- استخدم alt لكل منطقة لوصف محتواها.
- لو بتستخدم `poly` استخدم أدوات زي مواقع توليد الإحداثيات أو برامج التصميم.
- لو عايز إضافة تفاعل أعمق ممكن تستخدم JS مع `onclick`.
الخاتمة
وبكده نكون فهمنا تقنية **خريطة الصور** في HTML باستخدام وسوم
<map> و<area>، عرفنا إزاي نحدد الأشكال،
الإحداثيات، وازاي نخلي الصورة تفاعلية بطريقة احترافية. التقنية دي بتضيف بعد
بصري وتفاعلي كويس لأي موقع أو صفحة تعليمية.
لو استفدت من الدرس، شاركه مع أصحابك اللي بيتعلموا ويب، ومتنساش تشترك في المدونة علشان توصلك باقي الدروس بنفس الجودة. أشوفك في درس جديد، والسلام عليكم!
مواقع الاحداثيات
للدخول الي موقع الاحداثيات اضغط هنا