Skip to main content

كيفية عمل عدة روابط في صورة واحدة HTML

How to mapping image

كيفية ادراج عدة روابط في صورة واحدة

عمل عدة روابط في صورة واحدة HTML


مرر الماوس علىالعناصر داخل الجهاز imageلترى السحر



احصل على الكود


اليوم سوف نتعلم كيفية عمل عدة روابط في صورة واحدة درس سهل وبسيط :)
االادوات(الاكواد) التي نحتاجها
1-usemap
2-map name
3-area tag
سنحتاج ايضا العثور على الاحداثيات

هذا هو الكود التي سنتخدمه لعمل عدة روابط في صور واحدة
لاتقلق فانا ذاهب لاشرحلك ماهو هذا الكود بالتفصيل :)
في البداية ضع الصورة التي تريدها

الان بعد ماتم اضافة كود الصورة التي نريده سوف نضيف هذا الكود البسيط بجانب الكود كما موضح بالصورة
قم بكتابة هذا الكود البسيط بجانب كود الصورة التي نريده كما موضح بالشكل usemap=""


قم باعطاء اسم للصورة قم بوضع(#)قبل الاسم

احسنت لقد قمت باول جزء ننتقل الى الجزء الثاني الي وهو عمل الصورة متعددة الروابط المسماه ب(خريطة)
ننتقل لعمل الخريطة الان ....

نقوم بصنع خريطتنا او الصورة متعددة الروابط كما بالشكل التالي ونقوم بتسميتها نفس الاسم الذي قمنا باختيارة في الاعلى ولاكن هذه المرة بدون علامة # ا
اخر تاج لدينا هو تاج area اوالمنطقة وبهذا التاج سوق نقوم بربط الاحداثيات بالصورة

في هذا القسم من التاج نقوم بعمل الاحداثيات التي سنحصل عليها من الصورة

هذا كل شيء بالنسبة لعمل خريطة او صورة متعددة الروابط
الان بعد مانتهينا من رسم خريطتنا (صورة متعدد الروابط)بقي علينا شيء واحد وهو العثور على الاحداثياتcoords
بامكانك استخدام برامج متعددة للحصول على احداثيات اي صورة تحتاجها ولاكن في هذا الدرس سوف نشرح على موقع سهل وبسيط
سوف اعطيك افضل موقع بامكانه اعطائك افضل الاحداثيات
اضغط هنا لزيارة الموقع

1- نقوم باختيار الصورة المراد عمل خريطة لها (متعددة الروابط) chose file
2-نقوم برفع الصورة (upload)
3-بعد تحميل الصورة نقوم بالضغط على كلمة accept

نقوم بالتحديد على المكان المراد عمل رابط له على الصورة وثم ننسخ الاحداثيات مثل ماموجود بالصورة coords

بعد مانتهينا من نسخ الاحداثيات وحفضها في اي مكان نقوم بالتحديد على الصورة التالية المراد عمل رابط لها ونقوم بنسخ الاحداثيات coords
الان قم بالذهاب الى area وقم بلصق coords الاحداثيات التي نسختها من الصور
كما بالشكل التالي

اناسوف اعطي عنوان بدل من رابط وذلك حينما تمرر الماوس على صورة الفتاة سوف يعطيني اسم الفتاة فقط

نقوم بنسخ الكود مر اخرى وبدال فتاة نقوم بتسميته قطة ونقوم بوضع الاحداثيات معها

النتيجة النهائية لشكل الكود

النتيجة
قم بتمرير الماوس على الصورة لملاحظة النتيجية النهائية



شكرا جزيلا على متابعة الدرس اتمنى انكم استفدتم وسامحوني على الشرح لانه انجليزي مترجم للعربية وسلام
ملاحطة: يمكننا اضافة روابط بدال العنوان يعني حينما يتم الضغط على الصورة تنتقل الى مكان محدد حسب الاحداثيات