HTML image maps: keep image hotspots accessible and stable

Last updated: 5 Oct 20267 min read

tutorial

An image map assigns link regions to coordinates within one image.

When the element earns its place

A warehouse floor plan links two marked storage zones to their inventory pages. Each area has an action-specific text alternative, and ordinary text links repeat the destinations for people who cannot use the visual map. Coordinates are tied to the displayed image geometry; responsive scaling can break the hit targets if the map is not tested at the sizes actually shipped. A list of links is often the simpler interface when precise geometry adds little value.

<img src="/media/warehouse-zones.png" alt="Warehouse plan with north and south storage zones" usemap="#warehouse-zones" width="640" height="360">
<map name="warehouse-zones" id="warehouse-zones">
  <area shape="rect" coords="32,40,288,170" href="/inventory/north" alt="Open north zone inventory">
  <area shape="rect" coords="350,182,600,330" href="/inventory/south" alt="Open south zone inventory">
</map>
<p><a href="/inventory/north">North zone inventory</a> · <a href="/inventory/south">South zone inventory</a></p>

Behavior boundary

The image and both inventory routes must exist. Alternative text names each destination, while the image alt describes the whole plan. The duplicate text links serve as a resilient way to reach the same pages.

Cost and operational limits

One bitmap may be expensive on a mobile connection and the map needs viewport testing. A plain list has lower asset and maintenance cost, so keep the image only when location within the plan matters.

Common Mistakes

Do not leave an area without useful alt text.
Do not assume fixed coordinates remain correct after responsive resizing.
Do not make the image the only route to the linked records.

Connected lessons

html

media