HTML usemap Attribute

The usemap attribute on an element binds the element‘s image to an image-map. This image-map partitions the image into clickable areas. Elements that accept this attribute include <img> and <object>.

Example

#

A usemap attribute on an <img> element.
The image has a map with 3 clickable areas: monitor, keyboard, and mouse.

Computer Monitor Keyboard 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.


Using usemap

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.


Syntax

<tagname usemap="#mapname">

Values

#

Value Description
#mapname A hash character (#) followed by the name of the map to be used.

Elements that accept usemap

Elements that accept the usemap attribute.

Elements Description
<img> Specifies an HTML image -- see example above
<object> Embeds an external resource as an object.

<object> with usemap

A usemap attribute on an <object> element.
The image has a map with 3 clickable areas: monitor, keyboard, and mouse.

Monitor Keyboard 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.


Browser support

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

You may also like



Guides