علامة <map> HTML
مثال
خريطة صورة مع مناطق قابلة للنقر:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<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="Cup of coffee" href="coffee.htm">
</map>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يتم <map>استخدام العلامة لتحديد خريطة الصورة. خريطة الصورة هي صورة بها مناطق قابلة للنقر.
ترتبط سمة الاسم المطلوبة <map>للعنصر بسمة خريطة المستخدم الخاصة بـ <img> وتنشئ علاقة بين الصورة والخريطة.
يحتوي <map>العنصر على عدد من عناصر <area> ، التي تحدد المناطق القابلة للنقر في خريطة الصورة.
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <map> | Yes | Yes | Yes | Yes | Yes |
صفات
| Attribute | Value | Description |
|---|---|---|
| name | mapname | Required. Specifies the name of the image map |
السمات العالمية
تدعم <map>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <map>العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
خريطة صورة أخرى ، مع مناطق قابلة للنقر:
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
الصفحات ذات الصلة
مرجع DOM HTML: خريطة الكائن
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <map>العنصر بالقيم الافتراضية التالية:
map {
display: inline;
}