خرائط صور HTML
باستخدام خرائط صور HTML ، يمكنك إنشاء مناطق قابلة للنقر على الصورة.
خرائط الصور
<map>تحدد علامة HTML خريطة الصورة. خريطة الصورة هي صورة بها مناطق قابلة للنقر. يتم تحديد المناطق بعلامة أو أكثر <area>.
حاول النقر فوق الكمبيوتر أو الهاتف أو فنجان القهوة في الصورة أدناه:
مثال
فيما يلي رمز مصدر HTML لخريطة الصورة أعلاه:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
كيف يعمل؟
تكمن الفكرة وراء خريطة الصورة في أنه يجب أن تكون قادرًا على تنفيذ إجراءات مختلفة اعتمادًا على المكان الذي تنقر عليه في الصورة.
لإنشاء مخطط صورة ، تحتاج إلى صورة وبعض تعليمات HTML البرمجية التي تصف المناطق القابلة للنقر.
الصورة
يتم إدراج الصورة باستخدام <img>العلامة. الاختلاف الوحيد عن الصور الأخرى هو أنه يجب عليك إضافة usemapسمة:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
تبدأ usemapالقيمة بعلامة تجزئة
#متبوعة باسم خريطة الصورة ، وتُستخدم لإنشاء علاقة بين الصورة وخريطة الصورة.
نصيحة: يمكنك استخدام أي صورة كخريطة صورة!
إنشاء خريطة الصورة
ثم أضف <map>عنصرًا.
يُستخدم <map>العنصر لإنشاء خريطة صورة ، ويرتبط بالصورة باستخدام name
السمة المطلوبة:
<map name="workmap">
يجب أن تحتوي السمة على nameنفس قيمة
سمة.<img>usemap
المناطق
ثم أضف المناطق القابلة للنقر.
يتم تحديد المنطقة القابلة للنقر باستخدام <area>عنصر.
شكل
يجب تحديد شكل المنطقة القابلة للنقر ، ويمكنك اختيار إحدى هذه القيم:
rect- تحدد منطقة مستطيلةcircle- تحدد منطقة دائريةpoly- يحدد منطقة متعددة الأضلاعdefault- يحدد المنطقة بأكملها
يجب عليك أيضًا تحديد بعض الإحداثيات لتتمكن من وضع المنطقة القابلة للنقر على الصورة.
الشكل = "مستقيم"
تأتي الإحداثيات shape="rect"في أزواج ، أحدهما للمحور x والآخر للمحور y.
لذلك ، تقع الإحداثيات 34,44على بعد 34 بكسل من الهامش الأيسر و 44 بكسل من الأعلى:
تقع الإحداثيات 270,350على بعد 270 بكسل من الهامش الأيسر و 350 بكسل من الأعلى:
لدينا الآن بيانات كافية لإنشاء منطقة مستطيلة قابلة للنقر:
مثال
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
هذه هي المنطقة التي تصبح قابلة للنقر وسوف ترسل المستخدم إلى الصفحة "computer.htm":
الشكل = "دائرة"
لإضافة منطقة دائرة ، حدد أولاً إحداثيات مركز الدائرة:
337,300
ثم حدد نصف قطر الدائرة:
44 بكسل
لديك الآن بيانات كافية لإنشاء منطقة دائرية قابلة للنقر:
مثال
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
هذه هي المنطقة التي تصبح قابلة للنقر وسوف ترسل المستخدم إلى الصفحة "coffee.htm":
الشكل = "بولي"
يحتوي shape="poly"على عدة نقاط إحداثيات ، مما يؤدي إلى تكوين شكل مكون من خطوط مستقيمة (مضلع).
يمكن استخدام هذا لإنشاء أي شكل.
ربما مثل شكل كرواسون!
كيف يمكننا أن نجعل الكرواسون في الصورة أدناه رابطًا قابلًا للنقر؟
علينا إيجاد إحداثيات x و y لجميع حواف الكرواسون:
تأتي الإحداثيات في أزواج ، أحدهما للمحور x والآخر للمحور y:
مثال
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
هذه هي المنطقة التي تصبح قابلة للنقر وسوف ترسل المستخدم إلى الصفحة "croissant.htm":
خريطة الصورة وجافا سكريبت
يمكن للمنطقة القابلة للنقر أيضًا تشغيل وظيفة JavaScript.
أضف clickحدثًا إلى <area>العنصر لتنفيذ وظيفة JavaScript:
مثال
هنا ، نستخدم السمة onclick لتنفيذ وظيفة JavaScript عند النقر فوق المنطقة:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
ملخص الفصل
- استخدم
<map>عنصر HTML لتعريف خريطة الصورة - استخدم
<area>عنصر HTML لتحديد المناطق القابلة للنقر في خريطة الصورة - استخدم
usemapسمة HTML<img>للعنصر للإشارة إلى خريطة الصورة
علامات صورة HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .