HTML <map> Element
The HTML <map> element defines an image map containing one or more clickable areas. It works with an <img> element and <area> elements to allow different regions of a single image to link to different destinations.
Syntax
<img src="image.jpg" alt="Example image" usemap="#example-map">
<map name="example-map">
<area shape="rect" coords="0,0,200,150" href="page.html" alt="Example link">
</map>The usemap attribute on the <img> references the name of the <map>. The <area> elements inside the map define the clickable regions and their destinations.
Attributes
The <map> element supports the global HTML attributes and the following element-specific attribute:
| Attribute | Description |
|---|---|
name |
Assigns a name to the image map so it can be referenced by the usemap attribute of an <img> element. |
Example
This example turns different regions of a single image into links. Select the left side of the image to open the HTML tutorial home page or the right side to open the HTML element reference.
Usage Notes
An image map requires an image with a usemap attribute and a corresponding <map> element with a matching name. The usemap value begins with #, while the name value does not.
The clickable regions are defined by <area> elements placed inside the <map>. Each area can specify its shape, coordinates, destination URL, and alternative text.
Common area shapes include rect for rectangles, circle for circles, and poly for polygons. The coords attribute supplies the coordinates needed to define the selected shape.
The coordinates used by an image map correspond to positions in the image. If CSS changes the displayed dimensions of the image without adjusting the coordinate system, the clickable regions may no longer line up correctly with the intended parts of the image.
Image maps are useful when several distinct regions of one image need separate links, but ordinary text links or individually linked images are often easier to create, maintain, and adapt to responsive layouts.
Accessibility
Provide useful alt text for the <img> and for each linked <area>. The image alternative describes the overall image, while each area alternative should identify the purpose or destination of that particular link.
Area descriptions should communicate the function of each clickable region without requiring users to see or interpret the image.
Make sure the destinations available through an image map can be understood and operated with a keyboard and assistive technologies. When the image map provides important navigation, consider providing equivalent text links as an additional way to reach the same destinations.
Avoid relying only on visual position, shape, or color to explain what each clickable region does.
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.
For detailed browser compatibility information, see Can I Use: HTML <map> Element .
Related Elements
<area> - Defines a clickable region within an image map.
<img> - Embeds the image associated with an image map.
<a> - Creates a hyperlink to another page, file, or location.
<picture> - Provides multiple image sources for different display conditions.