شرح صفوف ومحتوى الفقرة
خطوات إنشاء خريطة في الصورة:
1. إضافة الصورة: نقوم بإنشاء صورة باستخدام عنصر <img>. يجب اختيار صورة تحتوي على أكثر من عنصر يمكن التفاعل معه، مثل صورة تحتوي على جهاز كمبيوتر أو هاتف أو فنجان كما في الصورة السابقة.
2. إنشاء عنصر <map>: نقوم بإنشاء عنصر <map>. يتضمن هذا العنصر علامة فتح <map> وعلامة إغلاق</map> لتحديد نطاق الخريطة.
3. تعيين اسم للخريطة: نستخدم خاصية [name] في عنصر <map> لإعطائه اسمًا مميزًا، مما يتيح لنا الرجوع إليه بسهولة. مثال: <map name="image-map"></map>.
4. ربط الصورة بالخريطة: نربط الصورة <img> بالخريطة باستخدام خاصية [usemap]. نضع الاسم المحدد للخريطة داخل الخاصية مسبوقًا بعلامة الشباك [#]، ليبدو بالشكل التالي: ["usemap="#image-map].
5. إضافة المناطق: نقوم بإضافة ثلاث مناطق في الصورة باستخدام عناصر <area>. كل عنصر مرسوم في الصورة يجب أن يكون له منطقة <area> منفصلة خاصة به.
6. تحديد الإحداثيات: يحمل كل عنصر <area> خاصية [coords]، والتي تُحدد الإحداثيات الخاصة بمكان العنصر على الصورة. يمكن استخدام موقع [www.image-map.net] لحساب الإحداثيات تلقائيًا.
7. تحديد الروابط: يحتوي عنصر <area> أيضًا على خاصية [href]. نضع فيها رابط صفحة الويب أو الصورة التي سيتم الانتقال إليها عند النقر على أي من المناطق المحددة.
