How to Make Clickable Regions on an Image

A floor plan where each room links to a booking page. A regional map where each territory goes to its own contact details. A product diagram where each component links to its spec sheet.

The HTML feature for this has existed since the 1990s and still works in every browser. It also has one property that makes it awkward on a modern site, and knowing that up front saves an afternoon.

How image maps work

You define a <map> containing <area> elements, each with a shape — rectangle, circle, or polygon — and a set of coordinates. The image references the map with usemap, and the browser turns those regions into links.

The coordinates are in image pixels, measured from the top-left corner. That’s the crucial detail: they’re absolute numbers, not percentages.

On a fixed-size image, that’s fine. On a responsive site where the image scales with the viewport, the coordinates no longer match what’s on screen — the clickable regions stay where they were and the image moves underneath them. The mismatch is invisible until someone clicks slightly off and lands on the wrong link.

There are two ways round it. Recalculate the coordinates in script as the image resizes, or skip image maps and use an inline SVG with linked shapes, which scales natively because SVG coordinates are relative to a viewBox. For anything new, SVG is usually the better route.

Why people get stuck here

• Responsive scaling. The core limitation, and the one that surprises people after the map already works on their desktop.
• Coordinates by hand. Polygon regions need many coordinate pairs, and typing them is miserable.
• Missing alt text. Each area is effectively a link, and without alt text a screen reader announces nothing useful.
• Touch targets. Regions sized for a mouse are frequently too small for a finger.

What good image map markup looks like

Alt text on every area

Not optional. Each area is a link, and the alt attribute is its accessible name. An image map with no alt text is a set of unlabelled links, which is close to unusable non-visually.

Regions large enough to tap

Guidance on touch target size generally lands around 44 by 44 pixels as a minimum. A precise polygon around a small building on a map may be accurate and unusable on a phone.

A plan for scaling

Either a fixed-size image, script that recalculates coordinates, or an SVG instead. Choosing this before you build saves rebuilding.

Common mistakes to avoid

• Building a map against a full-size image and displaying it scaled down.
• Omitting alt attributes, which makes every region an unlabelled link.
• Drawing polygon regions so tightly that they’re impossible to tap accurately.
• Using an image map where a list of links beneath the image would serve most users better.
• Forgetting that the image itself still needs its own alt text describing the whole thing.

How to do it with Image Map Generator

The Image Map Generator draws the regions and produces the markup, in your browser.

1. Add the image and draw the clickable regions on it.
2. Give every region a link and a meaningful alt text.
3. Copy the markup, and add the responsive handling if the image will scale.
4. Test with a keyboard — each area should be reachable by tabbing.

MDN’s documentation on the area element covers the attributes in full. Other developer tools are in the tools directory.

Frequently asked questions

Do image maps still work?

Yes, they’re standard HTML with universal browser support. The problem is that coordinates are in pixels, so a responsive image and a fixed coordinate map disagree the moment the image resizes.

How do I make one responsive?

Either recalculate coordinates in script as the image scales, or use an inline SVG with linked shapes instead. For anything new, SVG is generally the better answer.

Why does alt text matter on areas?

Because each area is effectively a link. Without alt text a screen reader has nothing to announce, so the map becomes a set of anonymous destinations.

Final thought

Decide how the image will scale before you place a single coordinate. That one decision determines whether you’re building an image map or an SVG.

Try the free Image Map Generator