The usemap attribute on an <img> tag binds the image to an image-map.
An image-map partitions the image into clickable areas.
A usemap attribute on an <img> element. The image has a map with 3 clickable areas: screen, keyboard, and mouse. Click an area to see.
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area shape="rect" coords="253,142,16,2" alt="Computer" href="javascript:alert('Computer screen 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>
The usemap attribute binds an image to an image-map.
An image-map overlays the image with one or more clickable areas.
Note: The ismap attribute does not work for <img> elements that are contained in an <a> or a <button> element.
<img usemap="#mapname">
Value | Description |
---|---|
#mapname | A hash character (#) followed by the name of the map to be used. |
Here is when usemap support started for each browser:
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 |