map
Defines an image map with clickable regions linked to an img element via the usemap attribute. Coordinates are pixel-based and do not scale responsively.
Description
The <map> element defines a client-side image map — a set of clickable regions overlaid on an image. Each region is defined by an <area> child element with pixel-based coordinates. The map is linked to an <img> via the usemap attribute.
Image maps were designed for fixed-size images in the early web. The coordinate system uses absolute pixel values, which means hotspot regions break when the image scales to a different size — a serious limitation in responsive layouts.
Basic Example
Hover over a room to see its title tooltip. Click to see the area name in the status bar. This demo renders the image at its native 800×500 pixels so the pixel-based coordinates align correctly.
<img src="floor-plan.jpg" alt="Office floor plan" usemap="#office" width="800" height="500" /> <map name="office"> <area shape="rect" coords="40,40,320,220" href="/rooms/conference" alt="Conference Hall" /> <area shape="circle" coords="500,160,80" href="/rooms/server" alt="Server Room" /> <area shape="poly" coords="480,280,760,280,760,460,560,460,480,380" href="/rooms/office" alt="Open Office" /></map>How It Works
The <map> and <img> are connected through two attributes:
- The
<map>element has anameattribute (e.g.name="office") - The
<img>has ausemapattribute with a hash reference (e.g.usemap="#office")
The browser renders the image normally. When the user clicks or taps within a region defined by an <area>, the browser navigates to that area’s href.
<!-- The img references the map by name --><img src="diagram.png" alt="Network diagram" usemap="#network" width="600" height="400" /> <!-- The map is identified by its name attribute --><map name="network"> <area shape="rect" coords="10,10,200,150" href="#router" alt="Main router" /> <area shape="rect" coords="250,10,450,150" href="#switch" alt="Core switch" /></map>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
name |
string | Yes | Unique name referenced by the usemap attribute on an <img>. Must not contain spaces. |
The <map> element also supports global attributes.
The Responsive Problem
Native <map> coordinates are defined in absolute pixels matching the image’s natural dimensions. Modern layouts scale images fluidly with max-inline-size: 100%, but the coordinate system does not scale with them. The result: hotspot regions drift away from their visual targets as the image shrinks or grows.
<!-- Native map: pixel coords break at any size other than 800x500 --><img src="plan.jpg" alt="Floor plan" usemap="#plan" width="800" height="500" style="max-inline-size: 100%; block-size: auto;" /> <map name="plan"> <!-- These coords target exact pixels in the 800x500 image. When the image scales to 400px wide, coords still reference the original 800px space — hotspots shift off-target. --> <area shape="rect" coords="40,40,320,220" href="#room-a" alt="Room A" /></map>Workarounds exist (JavaScript that recalculates coordinates on resize), but they add complexity and fragility. The native element was not designed for responsive use.
Modern Alternative
Vanilla Breeze provides <image-map> as a modern replacement for native <map>/<area>:
| Feature | Native <map> | VB <image-map> |
|---|---|---|
| Coordinate system | Absolute pixels | Percentages (0–100) |
| Responsive | No | Yes |
| Tooltips | title text only | Rich HTML content |
| Keyboard navigation | Tab only | Tab + Arrow keys + Escape |
| Visual feedback | None | SVG overlay with hover highlight |
| Progressive enhancement | N/A (native) | Falls back to labeled list |
<!-- Modern replacement: percentage-based coordinates --><image-map> <img src="plan.jpg" alt="Floor plan" /> <map-area shape="rect" coords="5 8 40 44" label="Room A" href="#room-a"> <strong>Room A</strong> <p>Rich HTML tooltip content.</p> </map-area></image-map>Accessibility
- Every
<area>must have analtattribute describing the linked region - The
<img>itself needs analtdescribing the overall image - Native image maps support keyboard navigation via Tab between areas
- Screen readers announce area
alttext as link text - No visual focus indicator exists on native areas — users cannot see which region has focus
Browser Support
The <map> element has universal browser support dating back to the earliest HTML specifications. However, it was designed for an era of fixed-width layouts and offers no adaptation for modern responsive design.
Related
<area>— defines clickable regions within an image map<img>— the image element that references a map viausemap<image-map>— modern responsive replacement with percentage coordinates