The usemap attribute on an element binds the element‘s image to an image-map.
This image-map partitions the image into clickable areas.
A usemap attribute on an <img> element. The image has a map with 3 clickable areas: monitor, keyboard, and mouse.
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area shape="rect" coords="253,142,16,2" alt="Monitor" href="javascript:alert('Computer monitor was clicked');">
<area shape="rect" coords="262,218,0,156" alt="Keyboard" href="javascript:alert('Computer keyboard was clicked');">
<area shape="circle" coords="267,234,22" alt="Mouse" href="javascript:alert('Computer mouse was clicked');">
</map>
For additional details see our HTML img usemap Reference.
The usemap attribute binds an image with an image-map.
This image-map overlays the image with one or more clickable areas.
The usemap attribute accepts the name of the <map> element.
Note: The usemap attribute does not work for <img> or <object> elements that are contained in an <a> or <button> element.
<tagname usemap="#mapname">
| Value | Description |
|---|---|
| #mapname | A hash character (#) followed by the name of the map to be used. |
Elements that accept the usemap attribute.
| Elements | Description | |
|---|---|---|
| <img> | Specifies an HTML image -- see example above | |
| <object> | Embeds an external resource as an object. |
A usemap attribute on an <object> element.
The image has a map with 3 clickable areas: monitor, keyboard, and mouse.
<object data="/img/html/computer-map.png" alt="Computer" type="image/png" usemap="#computer"></object>
<map name="computer">
<area shape="rect" coords="253,142,16,2" alt="Monitor" href="javascript:alert('Computer monitor was clicked');">
<area shape="rect" coords="262,218,0,156" alt="Keyboard" href="javascript:alert('Computer keyboard was clicked');">
<area shape="circle" coords="267,234,22" alt="Mouse" href="javascript:alert('Computer mouse was clicked');">
</map>
Note: Browser support for usemap on <object> is very limited.
For additional details see our HTML object usemap Reference.
This table shows when usemap support on <img> started for each browser:
Note: Browser support for usemap on <object> is very limited.
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
