<map> defines an image map: regions associated with links through area. An image’s usemap fragment refers to the map’s name.
A fixed-size garden plan
The picture and coordinates use the same 240-by-120 CSS-pixel geometry. Each region links to a real section, with ordinary text links as another way to reach it.
HTML and CSS
HTML
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22120%22%20viewBox%3D%220%200%20240%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23dbeafe%22%2F%3E%3Crect%20x%3D%22120%22%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23dcfce7%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2265%22%20font-size%3D%2220%22%3EHerbs%3C%2Ftext%3E%3Ctext%20x%3D%22140%22%20y%3D%2265%22%20font-size%3D%2220%22%3EFlowers%3C%2Ftext%3E%3C%2Fsvg%3E"
width="240"
height="120"
alt="Garden plan with herbs on the left and flowers on the right"
usemap="#garden"
/><map name="garden" id="garden"
><area shape="rect" coords="0,0,120,120" href="#herbs" alt="Herb bed" />
<area shape="rect" coords="120,0,240,120" href="#flowers" alt="Flower bed"
/></map>
<p>
Text links: <a href="#herbs">Herb bed</a> · <a href="#flowers">Flower bed</a>
</p>
<h2 id="herbs">Herb bed</h2>
<p>Basil and parsley.</p>
<h2 id="flowers">Flower bed</h2>
<p>Marigolds.</p>CSS
img {
display: block;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Name and structure
name is required, nonempty, unique among maps in the document, and cannot contain whitespace. If you also use id, give it the same value. A map accepts content according to its surrounding context; areas must have a map ancestor.
An image using usemap must not be inside a link or button. Provide an overall image alt and useful alternatives for each linked area.
Size and accessibility
Coordinates are CSS pixels, not percentages. If CSS scales the displayed image, fixed coordinates can stop matching its regions; image maps do not automatically scale arbitrary coordinates for you. Test the actual size, zoom, keyboard focus, and assistive technology. Text links are often the simpler solution for responsive interfaces.
Tab through the example’s regions and links. Avoid tiny targets or making position and color the only way to understand a destination.
Sources and browser support
MDN: map describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.