HTML Image Maps

An image map lets you turn a single image into several separate clickable regions, each linking to a different destination. Instead of slicing an image into multiple files, you keep one image and define invisible “hot spots” over it using the <map> and <area> elements. This is how, for example, a map of a country can have each region clickable, or a diagram of a product can have each part link to its own description page.

Overview / How it works

An image map is built from three pieces working together:

An <img> element with a usemap attribute pointing to a map’s name.
A <map> element that holds the definitions for the clickable regions. It has a name attribute that the image references.
One or more <area> elements inside the <map>, each describing a shape (rectangle, circle, or polygon), its coordinates, and a link (href).

The browser does not need to know anything about the pixel content of the image itself — it only reads the coordinates you supply and overlays invisible hit-regions on top of the rendered image. When a user’s pointer is inside one of those regions and they click (or, with keyboard/assistive technology, focus and activate it), the browser navigates using that <area>’s href, exactly like a normal link.

Semantically, the <map> element itself is not visible and does not affect layout — it renders with no box at all, similar to <script> or <template>. Only the referenced <img> is what the user actually sees. The DOM still contains the <map> and its <area> children as real nodes, and each <area> behaves like an <a> element for keyboard focus and navigation purposes — it can receive focus (typically shown with a focus outline drawn over the image) and can be activated with Enter or Space.

The connection between the image and the map is made purely by name, not by nesting. The <img> does not need to be a child of <map>; it simply references the map’s name through usemap="#name". Because the link is by name, a single <map> definition could even be reused by more than one <img> on the same page (though in practice this is rare).

Syntax

<img src="diagram.png" alt="Description of the whole image" usemap="#mapname">

<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="page1.html" alt="Region 1">
  <area shape="circle" coords="x,y,r" href="page2.html" alt="Region 2">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="page3.html" alt="Region 3">
</map>

Attribute	Element	Purpose
`usemap`	<img>	References a map’s name, always prefixed with `#`, e.g. `#mapname`.
`name`	<map>	The identifier the <img>’s `usemap` points to.
`shape`	<area>	One of `rect`, `circle`, or `poly` (also `default` for the entire remaining area).
`coords`	<area>	A comma-separated list of numbers whose meaning depends on `shape` (see below).
`href`	<area>	The link destination for that region, same rules as an <a> element’s `href`.
`alt`	<area>	Text alternative for the region, announced by screen readers and shown if images are disabled.

Coordinate formats by shape

rect: x1,y1,x2,y2 — the top-left and bottom-right corners of a rectangle, in pixels from the image’s top-left corner.
circle: x,y,r — the center point and the radius, in pixels.
poly: x1,y1,x2,y2,x3,y3,... — a list of point coordinates tracing the outline of the polygon; the browser closes the shape automatically back to the first point.

Examples

Example 1: A simple rectangular hot spot

<img src="button-panel.png" alt="Control panel with a single power button" usemap="#panelmap" width="300" height="120">

<map name="panelmap">
  <area shape="rect" coords="20,20,120,90" href="power-info.html" alt="Power button information">
</map>

Result: The image renders exactly as a normal picture. When the visitor moves the pointer over the rectangular region from (20,20) to (120,90), the cursor changes to a pointer/hand, and clicking navigates to power-info.html. Outside that rectangle, clicking the image does nothing, because no <area> covers that space.

This is the minimal working image map: one image, one named map, one clickable rectangle.

Example 2: Multiple shapes on one diagram

<img src="world-regions.png" alt="Simplified map of three regions" usemap="#regionmap" width="400" height="300">

<map name="regionmap">
  <area shape="rect" coords="0,0,150,150" href="north.html" alt="North region">
  <area shape="circle" coords="300,80,60" href="east.html" alt="East region">
  <area shape="poly" coords="50,200,150,180,180,280,60,290" href="south.html" alt="South region">
</map>

Result: The single image now has three independently clickable regions overlaid on it: a square block in the upper-left linking to north.html, a circular region on the right linking to east.html, and an irregular four-point polygon in the lower area linking to south.html. Hovering over any of the three areas shows the link target in the browser’s status bar, just like hovering an <a>.

Notice each <area> is entirely independent — they can overlap, leave gaps, or cover the whole image, and the browser simply tests the pointer position against each region’s geometry in source order.

Example 3: Combining a default area with specific hot spots

<img src="office-floor.png" alt="Office floor plan" usemap="#floormap" width="500" height="350">

<map name="floormap">
  <area shape="rect" coords="10,10,140,120" href="room-a.html" alt="Room A">
  <area shape="rect" coords="160,10,300,120" href="room-b.html" alt="Room B">
  <area shape="default" href="floor-overview.html" alt="Floor overview">
</map>

Result: Clicking directly on Room A or Room B’s rectangle goes to that room’s page. Clicking anywhere else on the image (the default shape, which needs no coordinates) falls back to floor-overview.html. The default shape is always evaluated last regardless of its position in the source, acting as a catch-all.

How it works step by step

The parser builds the <img> as a normal image node, and separately builds the <map> element with its <area> children in the DOM tree, wherever it appears in the document (commonly right after the image, but it could technically live anywhere).
The browser resolves the <img>’s usemap="#name" reference against the <map>’s name attribute, associating the two.
Once the image is laid out on the page, the browser maps each <area>’s pixel coordinates onto the image’s actual rendered position, scaling if the image has been resized from its natural dimensions.
On pointer movement or click, the browser tests the cursor position against each <area>’s shape geometry, in source order, and treats a match like activating a link.
Keyboard users can Tab to each <area> in source order (they behave like focusable links) and activate the focused one with Enter.

Common Mistakes

Mistake 1: Forgetting the `#` in `usemap`

<img src="panel.png" alt="Panel" usemap="panelmap">
<map name="panelmap">
  <area shape="rect" coords="0,0,50,50" href="a.html" alt="A">
</map>

Without the leading #, usemap is treated as a URL rather than a same-document fragment reference, so the browser fails to find the map and the image simply has no clickable regions. Always write usemap="#panelmap", matching the name exactly, including case.

Mistake 2: Leaving the <map> element unclosed

<map name="panelmap">
  <area shape="rect" coords="0,0,50,50" href="a.html" alt="A">
<p>Some unrelated text.</p>

Here the <map> element is never closed, so the parser keeps treating following content as if it belongs inside the map, which can silently swallow later markup or produce an invalid document tree. Always close <map> explicitly with </map>, right after its <area> elements.

Best Practices

Always give every <area> a meaningful alt attribute — screen reader users rely on it entirely, since the shape itself carries no semantic meaning.
Match the <img>’s usemap value exactly to the <map>’s name attribute, including the leading # and matching case.
Keep coordinates in sync with the image’s natural pixel dimensions; if you resize the image with width/height attributes, verify the hot spots still line up, since coordinate scaling can shift depending on the browser.
Use a default shape sparingly, and only when a genuine “anything else” destination makes sense — otherwise omit it so unmapped areas do nothing.
Consider whether a simpler alternative fits better: a grid of separate linked images, or a list of <a> elements, is often easier to maintain and just as effective when the visual layout doesn’t require irregular shapes.
Remember that image maps are purely structural (HTML); any visual highlighting of a hovered region belongs to CSS, not to the map/area markup itself.
Test image maps with keyboard-only navigation (Tab and Enter) to confirm every region remains reachable without a mouse.

Practice Exercises

Create an image map over a picture of a simple shape (like a rectangle divided into three sections) with three <area> elements: one rect, one circle, and one poly, each linking to a different placeholder page.
Take an existing image map and deliberately introduce the missing-# mistake, then fix it and describe in your own words why the original version failed to work.
Add a default shape to a three-region image map so that clicking anywhere outside the three defined regions leads to a general “overview” page.

Summary

An image map pairs an <img> (via usemap="#name") with a <map name=”name”> element containing <area> children.
Each <area> defines a shape (rect, circle, poly, or default), its coords, an href, and an alt description.
The <map> element itself renders nothing visually; only the referenced image is displayed, with invisible clickable regions layered on top.
Coordinates are always in pixels relative to the image’s top-left corner, and their meaning depends on the shape.
Always include alt text on every <area> for accessibility, and double-check the usemap/name match including the leading #.