<map> Image map
Holds the clickable areas that turn an image into an image map.
<map> contains the <area> elements that make parts of an image clickable. Its name has to match the image's usemap value, which starts with a hash: usemap="#name".
People forget that hash all the time. The coordinates are fixed pixels, so the map breaks once the image is resized for a small screen. Separate links, or an SVG containing links, usually adapt better.
How usemap and name tie it to an image is explained in the map element definition (opens in a new tab). Each clickable region is an area element.
Syntax
<img src="plan.png" alt="Floor plan" width="400" height="300" usemap="#plan">
<map name="plan">
<area shape="rect" coords="0,0,100,100" href="room.html" alt="Room">
</map>When to use it
One fixed-size image, several destinations. A campus plan that links to each building fits that description, as does a country map pointing to regional pages on a small travel site, or a product photo where each part leads to its spare part page. That is when a <map> pays off. Images of the same size can even share one map if their usemap points at the same name.
In a flexible layout, an inline svg with a link around each shape usually works better because it scales with the drawing. Small regions are hard to tap on a phone, and there a handful of big text links tends to be the easiest thing to use.
Map names must be unique on the page and can't contain spaces. When two maps share a name the browser takes the first, so a pasted block of code can link the wrong regions without any warning. If you give the map an id as well, it has to match the name.
Attributes
| Attribute | What it does |
|---|---|
name | Name that the image's usemap refers to (required). |
Live example
Edit the code and watch the preview.
<img src="dog.svg" alt="A dog" width="400" height="300" usemap="#dogmap">
<map name="dogmap">
<area shape="circle" coords="200,150,80" href="#dog" alt="The dog">
</map>More examples
Text links inside the map
Besides areas, a map can hold normal content. A paragraph of text links inside this one repeats the destinations. Anyone who can't use the image regions still gets every link.
<img src="mountains.svg" alt="North and south peaks" width="800" height="400" usemap="#peaks">
<map name="peaks">
<area shape="rect" coords="0,0,400,400" href="#north" alt="North peak trails">
<area shape="rect" coords="400,0,800,400" href="#south" alt="South peak trails">
<p>Trails: <a href="#north">North peak</a> | <a href="#south">South peak</a></p>
</map>Two images, one map
The two pictures are both 400 by 300 pixels, which lets them reuse one map. The left and right halves of each image go to the same two places, and the areas only have to be written once.
<img src="cat.svg" alt="Cat" width="400" height="300" usemap="#halves">
<img src="dog.svg" alt="Dog" width="400" height="300" usemap="#halves">
<map name="halves">
<area shape="rect" coords="0,0,200,300" href="#adopt" alt="Adopt a pet">
<area shape="rect" coords="200,0,400,300" href="#donate" alt="Donate to the shelter">
</map>Tip: Put a # in front of the name in usemap.
Browser support
Client-side image maps built from map and area are part of the HTML Living Standard and work in every browser. The standard still defines server-side image maps too, made with the ismap attribute on an img inside a link. They send nothing but click coordinates, and you will rarely want one now.
Accessibility
The image and every area need alt text. Consider repeating the same links as normal text links for anyone who cannot use the map. The W3C image map tutorial (opens in a new tab) shows how to write the alt text.
Common mistakes
Wrong
<img src="plan.png" usemap="plan" alt="Floor plan">Right
<img src="plan.png" usemap="#plan" alt="Floor plan">usemap points to the map's name, written with a # in front.
Frequently asked questions
How do I connect a map to an image?
Through the name. Give the <map> a name attribute, then point to it from the image with usemap and a hash: <img src="plan.png" usemap="#plan" alt="Floor plan"> and <map name="plan">. If the map has an id as well, it must equal the name.
Do image maps work on responsive images?
Not by themselves. Each <area> has coords measured in the image's original pixels, and they stay put when CSS resizes the image. Fixing that takes JavaScript to recalculate them. For responsive interactive graphics, inline SVG with links around the shapes usually works better. Wikipedia's image maps (opens in a new tab) article explains why you rarely see them now.