HTML Image Maps

The Picture element chooses among image files. An image map keeps one image and makes regions of it clickable — hotspots on a floor plan, a diagram, or a simple graphic menu. You pair an img that has usemap with a <map> full of <area> links.

What an image map is

An image map is not a separate image format. It is HTML that says: “this rectangle (or circle, or polygon) on the picture should behave like a link.” Sighted users click the zone; assistive tech needs a clear alt on each area because there may be no visible text beside the hotspot.

Direct answer

1. Add usemap="#mapname" on the img.
2. Add <map name="mapname"> with one or more <area> elements.
3. Each area needs shape, coords, href, and its own alt.
   The # on usemap must match the map’s name (without inventing a second spelling).

Shape values at a glance

A simple rectangular map

Two hotspots on a desk layout is enough to learn the wiring: usemap, matching name, and area rectangles with honest alt text.

Reading the sample

• usemap="#deskmap" on the image points to the map named deskmap
• Each area is a link: href is the destination, alt names the hotspot
• coords for rect are left, top, right, bottom in the image’s pixel grid
• The image’s own alt (“Desk layout”) describes the whole graphic; area alts name the zones

How coordinates work

Coordinates are measured in CSS pixels of the image as laid out for the map. If you set width and height on the img, keep your coords consistent with that display size while you learn. Wrong numbers produce hotspots that miss the drawn objects — a common silent failure.

Accessibility habits

Every clickable area needs a meaningful alt. Do not leave hotspots unnamed. Prefer maps where the purpose of each region is obvious. If the design needs complex responsive behavior, many teams switch to SVG with links or separate buttons instead of fragile pixel maps.

When maps help — and when they do not

Maps help for a single diagram with a few stable regions. They get awkward when the image scales freely across many breakpoints, because classic coords do not automatically rewrite themselves. For modern responsive UIs, consider separate linked images, CSS layout, or SVG. Still, knowing image maps helps when you inherit older pages or simple teaching demos.

Circle and poly (quick note)

circle uses center and radius. poly lists pairs of x,y points around a free shape. Start with rect until the usemap / name pairing feels natural, then experiment with other shapes on a practice graphic.

Practice in your editor

1. Use a simple wide image with two obvious regions.
2. Create a map with two rect areas linking to two small practice pages.
3. Match usemap="#name" to map name="name" carefully (including the #).
4. Click each region and confirm navigation.
5. Break the name match once, observe the dead hotspots, then fix it.
6. Improve any area whose alt only says “link.”

Easy mistakes

• Mismatched usemap / name (forgetting # on usemap or renaming only one side)
• Missing alt on each area
• Coords that do not match the real image size or object positions
• Relying on image maps for highly fluid responsive layouts without a plan
• Putting the only description on the img and leaving areas unlabeled

Summary

• Image maps wire img + usemap + map + area
• Shapes include rect, circle, and poly
• Each area needs href, alt, shape, and coords
• Keep names matched and coords honest
• For complex responsive UIs, consider modern alternatives — still learn maps for legacy and simple diagrams