How to make an HTML image map (the easy way)

2026-06-19

An image map lets you make different parts of a single image link to different places — like a clickable floor plan, diagram, or banner — without slicing the image into pieces.

How it works

An image map is plain HTML: a <map> element containing <area> shapes (rectangles, circles, polygons), linked to your image with the usemap attribute. Each area has coordinates and an href.

Make one without writing coordinates by hand

Calculating pixel coordinates manually is tedious. Instead, open the Image Map Generator, upload your image, and draw rectangles, circles or polygons directly on it. Give each area a link, then copy the generated <map>/<area> HTML or download a ready-to-use file. It all runs in your browser.

Tips for good image maps

• Always add alt text to each area for accessibility.
• Image-map coordinates are pixel-based — enable the responsive option if your image scales with the layout.
• For simple two- or three-link banners, an image map is overkill; just stack normal links. Image maps shine for irregular, in-image regions.