HTML usemap Attribute

The HTML usemap attribute associates an <img> element with a client-side image map. The attribute references a <map> element containing one or more <area> elements that define clickable regions within the image.

Elements That Use the usemap Attribute

In modern HTML, the usemap attribute is used with the <img> element to associate an image with a client-side image map. Older HTML also allowed usemap on <input> and <object>, but those uses are obsolete and should not be used in new HTML.

usemap Attribute Value

The value of the usemap attribute is a hash-name reference consisting of a number sign (#) followed by the name of the <map> element to use.

<img src="image.png" alt="Example image" usemap="#example-map">

<map name="example-map">
  ...
</map>

In this example, usemap="#example-map" associates the image with the <map> element whose name is example-map.

Connecting usemap to <map>

The <map> element must have a name attribute so the image can reference it. The value must be non-empty, contain no ASCII whitespace, and be unique among the names of other <map> elements in the same document.

<img src="navigation.png" alt="Navigation choices" usemap="#navigation">

<map name="navigation">
  ...
</map>

If an id attribute is also specified on the <map> element, its value must be the same as the name value.

<map name="navigation" id="navigation">
  ...
</map>

Defining Clickable Areas

The <area> elements inside the image map define the clickable regions. Each area can specify a shape, coordinates, destination URL, and alternative text.

<map name="html-css-map">
  <area shape="rect" coords="0,0,200,250"
        href="/index-html.html" alt="HTML Tutorials">
  <area shape="rect" coords="200,0,400,250"
        href="/index-css.html" alt="CSS Tutorials">
</map>

The shape attribute determines the shape of the clickable region, while coords provides the coordinates needed to define that shape.

Image Map Coordinates

Image map coordinates are measured from the image's top-left corner. The values required by the coords attribute depend on the area's shape.

Shape	Coordinates	Description
`rect`	`x1,y1,x2,y2`	Defines the top-left and bottom-right corners of a rectangle.
`circle`	`x,y,radius`	Defines the center point and radius of a circle.
`poly`	`x1,y1,x2,y2,...`	Defines a polygon using a series of coordinate pairs.

For a 400 × 250 image divided vertically into two equal rectangular regions, the left half can use coords="0,0,200,250" and the right half can use coords="200,0,400,250".

Accessibility Considerations

Provide appropriate alternative text for the image and meaningful alt values for linked <area> elements. The area alternative text should describe the purpose or destination of each clickable region.

<area shape="rect" coords="0,0,200,250"
      href="/index-html.html" alt="HTML Tutorials">

Clickable regions should also be clearly identifiable and large enough for users to select comfortably. When an image map is used for navigation, consider providing equivalent text links when they would make the destinations easier to discover and use.

Common Mistakes

Do not omit the number sign (#) from the usemap value. The value must reference the map by using a hash-name reference such as usemap="#html-css-map".

Do not give the usemap attribute a value that differs from the name of the intended <map> element.

Do not use duplicate name values for multiple <map> elements in the same document.

Do not use usemap on an <input> or <object> element in new HTML. These uses are obsolete; use an <img> element for a client-side image map.

Do not place an <img> that uses usemap inside an <a> or <button> element.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The usemap attribute on the <img> element and client-side image maps are widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the usemap Attribute

The example divides a 400 × 250 image into two clickable regions. Select the left side to open the HTML Tutorials page or the right side to open the CSS Tutorials page.

Play in Editor

Summary

The HTML usemap attribute associates an <img> element with a client-side image map. Its value is a hash-name reference to the name of a <map> element. The map contains <area> elements that define clickable regions and their destinations. In modern HTML, use usemap with <img>; its older uses on <input> and <object> are obsolete.