HTML usemap Attribute
Definition and Usage
The usemap attribute specifies an image (or an object) as an image-map (an image-map is an image with clickable areas).
The usemap attribute is associated with a <map> element's name or id attribute, and creates a relationship between the <img> and the <map>.
Note: The usemap attribute cannot be used if the <img> element is a descendant of an <a> or <button> element.
Applies to
The usemap attribute can be used on the following elements:
| Elements | Attribute |
|---|---|
| <img> | usemap |
| <object> | usemap |
Examples
Example
An image-map, with clickable areas:
<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>
Try it Yourself »
<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>
Example
An <object> element using an image map:
<object data="planets.gif" width="145" height="126" usemap="#planetmap"></object>
Try it Yourself »
Browser Support
The usemap attribute has the following browser support for each element:
| Element | |||||
|---|---|---|---|---|---|
| img | Yes | Yes | Yes | Yes | Yes |
| object | Not supported | Yes | Yes | Not supported | Not supported |
