هذا المنشور سوف يعلمك:
- ما هي خرائط صور HTML؟
- كيفية إنشاء خرائط الصور في مستند HTML؟
- كيفية إنشاء خريطة صورة مرتبطة بصفحة أخرى؟
ما هي خرائط صور HTML؟
خريطة الصورة عبارة عن صورة بها مناطق يمكن النقر فوقها. لإنشاء خريطة صورة بتنسيق HTML ، فإن ' <خريطة> 'عنصر'. علاوة على ذلك ، هناك واحد أو أكثر من ' <المنطقة> 'علامات داخل عنصر'
بناء الجملة
تم ذكر بناء الجملة لتحديد خرائط الصور في مستند HTML أدناه:
< IMG src = 'images / img1.jpg' كل شيء = 'حاسوب محمول' usemap = '#clickspace' >
< خريطة اسم = 'clickspace' >
< مساحة شكل = 'مستقيم' إحداثيات = '312 22437422312' href = 'laptop.html' >
< / خريطة >
ال ' 'عنصر محدد بالسمات التالية:
- ' src 'يحدد مسار الصورة.
- ' كل شيء 'نصًا بديلاً عندما يتعذر تحميل الصورة.
- ' usemap 'لجعل مناطق الصورة قابلة للنقر. لإنشاء ارتباط ، يجب أن تكون قيمته هي نفس فئة أو معرف عنصر '
ال ' <خريطة> 'يضاف بالسمات التالية:
- ' شكل 'حجم منطقة HTML' <خريطة> ' جزء.
- ' إحداثيات 'إحداثيات المنطقة القابلة للنقر.
- ' href ”عنوان URL للمصدر.
كيفية إنشاء خرائط الصور في مستند HTML؟
لإنشاء خريطة صورة في مستند HTML ، تحقق من الإرشادات المقدمة:
- في HTML ، أضف ' '، وتعيين فئة' صورة خريطة '.
- ضمن هذا div ، أضف '
'لإضافة صورة مرتبطة بالسمات التي تمت مناقشتها أعلاه.
- ثم أضف HTML ' <خريطة> 'وتخصيص' انقر فوق ' اسم.
- نلاحظ أن ' usemap 'يتم تعيين الاسم' #clickspace 'مشيرًا إلى' اسم 'للعلامة'
- بداخله ، أضف ' <المنطقة> 'بالسمات المذكورة أعلاه:
< شعبة صف دراسي = 'خريطة الصورة' >
< IMG src = 'images / img1.jpg' كل شيء = 'حاسوب محمول' usemap = '#clickspace' >
< خريطة اسم = 'clickspace' >
< مساحة شكل = 'مستقيم' إحداثيات = '312 22437422312' href = 'laptop.html' >
< / خريطة >
< / شعبة >دعنا ننتقل نحو قسم CSS لضبط حجم الصورة.
نمط '
' في CSSاستخدم ' .image-map 'فئة للوصول إلى'
'وتطبيق خصائص CSS التالية: .image-map {
العرض : 700 بكسل ؛
الهامش: سيارة
}فيما يلي وصف لخصائص CSS المذكورة:
- ال ' العرض 'تحدد عرض عنصر div.
- ال ' حافة 'تضيف المزيد من المساحة حول العنصر.
نمط 'img' العنصر
.image-map img {
العرض : 100 ٪؛
}انظر ، إحداثيات المنطقة المحددة في ' إحداثيات 'قابلة للنقر الآن:
في القسم التالي ، سنتعلم كيفية ربط خريطة الصورة بمصدر آخر.
كيفية إنشاء خريطة صورة مرتبطة بصفحة أخرى؟
أنشئ صفحة HTML أخرى بالملحق ' .لغة البرمجة باتباع الخطوات المذكورة أدناه:
- في حالتنا ، نطلق عليها الاسم ' laptop.html '.
- أضف عنصر div وعيّن له فئة ' كمبيوتر محمول - IMG '.
- ثم ضع صورة باستخدام '
'وإقران' src ' و ' العرض ' صفات.
- بعد ذلك ، حدد فقرة باستخدام ' ' جزء:
< IMG src = '/images/l laptop.jpg' العرض = '400 بكسل' >
< ص > الكمبيوتر المحمول هو كمبيوتر محمول يمكن نقله واستخدامه في مجموعة متنوعة من الإعدادات / ص >
< / شعبة >في CSS ، حدد خصائص CSS التالية إلى ' كمبيوتر محمول - IMG ' صف دراسي:
.laptops-img {
العرض : 500 بكسل ؛
الهامش: سيارة
}انتاج |
الآن ، سوف نربط ' laptop.html 'صفحة إلى صورة' <المنطقة> 'من الصفحة الأولى. للقيام بذلك ، حدد عنوان URL للصفحة إلى ' href 'لعنصر' 'كما هو موضح أدناه:
< مساحة شكل = 'مستقيم' إحداثيات = '310،57،590،470' href = 'laptop.html' >انتاج |
لقد تعلمنا بنجاح ما هي خرائط الصور وكيف يتم ربطها بمصادر أخرى.
استنتاج
HTML ' <خريطة> 'لإنشاء خريطة صورة أو صورة ذات مناطق قابلة للنقر. لتحديد المناطق القابلة للنقر في الصورة ، واحد أو أكثر ' <المنطقة> 'علامات داخل عنصر'
- ضمن هذا div ، أضف '