Image Maps (<map>, <area>)

An image map lets a single image act as several clickable regions, each linking to a different destination. Instead of one <img> with one link, you define a set of shapes — rectangles, circles, or polygons — layered over the image, and each shape becomes its own hyperlink.

This was a popular technique in the early web for things like clickable geographic maps, diagrams with labeled parts, and navigation menus built from a single graphic. Modern CSS can achieve similar effects, but image maps remain a valid, semantic, and surprisingly handy tool for a specific set of use cases.

The Basic Structure

An image map requires two pieces working together:

An <img> element with a usemap attribute pointing to a <map> by name (prefixed with #).
A <map> element containing one or more <area> elements, each describing a clickable region.

HTML

<img src="world-map.png" alt="World map" usemap="#worldmap" width="600" height="400">

<map name="worldmap">
  <area shape="rect" coords="34,44,270,350" href="/regions/americas" alt="Americas">
  <area shape="rect" coords="290,40,540,200" href="/regions/europe" alt="Europe">
  <area shape="rect" coords="290,210,540,400" href="/regions/africa" alt="Africa">
</map>

Note

The name attribute on <map> is what the image's usemap="#name" attribute references. The leading # in usemap is required — it works like a fragment identifier, not a literal string match.

The shape Attribute

Each <area> needs a shape attribute describing the geometry of its clickable region, paired with a coords attribute whose format depends on the shape.

shape value	coords format	Meaning
rect	x1,y1,x2,y2	Top-left corner and bottom-right corner of a rectangle
circle	x,y,radius	Center point and radius of a circle
poly	x1,y1,x2,y2,x3,y3,...	A list of x/y coordinate pairs tracing the polygon vertices, in order
default	(none)	Matches the entire remaining area of the image not covered by other shapes

Rectangle Regions

HTML

<!-- Rectangle from (0,0) to (150,100) -->
<area shape="rect" coords="0,0,150,100" href="/section-a" alt="Section A">

Circle Regions

HTML

<!-- Circle centered at (200,150) with a radius of 60px -->
<area shape="circle" coords="200,150,60" href="/hub" alt="Central hub">

Polygon Regions

Polygons are the most flexible shape and the most tedious to author by hand — most people use an image-map generator tool or an SVG editor to trace the coordinates visually rather than guessing pixel values.

HTML

<!-- A triangular region -->
<area shape="poly" coords="100,10,190,180,10,180" href="/triangle" alt="Triangle region">

A Complete, Realistic Example

HTML

<figure>
  <img
    src="/office-floor-plan.png"
    alt="Office floor plan with clickable rooms"
    usemap="#floorplan"
    width="800"
    height="500"
  >
  <figcaption>Click a room to see its booking calendar.</figcaption>
</figure>

<map name="floorplan">
  <area shape="rect" coords="20,20,220,180" href="/rooms/conference-a" alt="Conference Room A">
  <area shape="rect" coords="240,20,440,180" href="/rooms/conference-b" alt="Conference Room B">
  <area shape="circle" coords="600,300,80" href="/rooms/lounge" alt="Lounge">
  <area shape="poly" coords="460,200,780,200,780,480,460,480" href="/rooms/open-office" alt="Open office area">
  <!-- default catches clicks anywhere else on the image -->
  <area shape="default" href="/rooms" alt="View all rooms">
</map>

Tip

Every <area> needs its own alt text, exactly like an <img>. Screen reader users navigate image maps area by area, and each one needs a meaningful, distinct description of where it leads.

Multiple Images Can Share One Map

A single <map> can be referenced by more than one <img> via usemap — useful when the same clickable layout applies to a responsive image swapped at different breakpoints, as long as the coordinate geometry still lines up with the displayed image size.

Warning

Image map coordinates are defined in the image's natural pixel dimensions, not in CSS display pixels. If you resize the image with CSS (e.g. width: 100%) without also scaling the coordinates, the clickable regions drift away from the visible shapes. Image maps do not scale automatically.

Why Modern Sites Rarely Use Image Maps

Because image map coordinates are fixed pixel values, they break on responsive layouts. Modern sites typically achieve the same "clickable regions over an image" effect with CSS:

Wrap the image in a positioned container (position: relative).
Layer absolutely-positioned, invisible <a> elements (or buttons) over the regions using percentage-based top/left/width/height.
The overlay scales naturally with the image at any viewport size — no coordinate math needed.

HTML

<div class="map-overlay">
  <img src="floor-plan.png" alt="Office floor plan" style="width: 100%; display: block;">
  <a class="hotspot" style="left: 2%; top: 4%; width: 25%; height: 36%;" href="/rooms/conference-a">
    <span class="visually-hidden">Conference Room A</span>
  </a>
</div>

CSS

.map-overlay { position: relative; }
.hotspot {
  position: absolute;
  display: block;
}

When Image Maps Still Make Sense

A fixed-size image that is never displayed responsively (e.g. a printed diagram embedded as-is).
Legacy documentation or intranet tools where a small, precise coordinate map is easier to maintain than an SVG or CSS overlay.
Rendering pipelines that generate both the image and coordinates together programmatically (e.g. auto-generated org charts).
Environments with very limited CSS/JS support, where the native browser feature is the simplest working option.

Clicking inside the "Conference Room A" rectangle on the floor plan
navigates to /rooms/conference-a — exactly like clicking a normal <a> link,
because that is effectively what each <area> is.

Key Takeaways

An image map pairs one <img usemap="#name"> with a <map name="name"> containing <area> elements.
shape can be rect, circle, poly, or default — each with its own coords format.
Every <area> needs alt text, just like an <img>, for accessibility.
Image map coordinates are in natural pixel dimensions and do not scale with responsive CSS sizing.
For responsive designs, prefer a CSS overlay of positioned links over the image instead of a native image map.
Image maps still have a place for fixed-size images and simple, tool-generated coordinate diagrams.