Dofactory.com
Dofactory.com

HTML <img> usemap Attribute

The usemap attribute on an <img> tag binds the image to an image-map.

An image-map partitions the image into clickable areas.

Example

#

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.

Computer Computer 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="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>

Using usemap

The usemap attribute binds an image to an image-map.

An image-map overlays the image with one or more clickable areas.

The usemap attribute accepts the name of the <map> element.

Note: The ismap attribute does not work for <img> elements that are contained in an <a> or a <button> element.


Syntax

<img usemap="#mapname">

Values

#

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

Browser support

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

You may also like

 Back to <img>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023


What's your favorite/least favorite part of Dofactory?


Guides