Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
area
Defines a clickable region within a map element using pixel-based shape coordinates. Used with img and map for client-side image maps.
Description
The <area> element defines a single clickable region inside an image map. It is always a child of a <map> element. Each area specifies a shape, pixel-based coords, and a destination href.
The <area> element is a void element — it has no closing tag and cannot contain child content. Tooltip text is limited to the title attribute (plain text only).
Live Demo
Hover over a room to see its title tooltip. Click to see the area name. The image renders at its native 800×500 pixels so the pixel-based coordinates align correctly.
Complete image map with all shape types
<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" title="Conference Hall — seats 120" /> <area shape="circle" coords="500,160,80" href="/rooms/server" alt="Server Room" target="_blank" /> <area shape="poly" coords="480,280,760,280,760,460,560,460,480,380" href="/rooms/office" alt="Open Office" /> <area shape="default" href="/rooms" alt="View all rooms" /></map>Shape Types
The shape attribute determines how coords are interpreted. All coordinate values are in absolute pixels relative to the image’s natural dimensions.
Rectangle
Defined by the top-left and bottom-right corners: left, top, right, bottom.
Rectangle area
<area shape="rect" coords="40,40,320,220" href="/rooms/conference" alt="Conference Hall" /> <!-- coords: left, top, right, bottom (pixels) -->Circle
Defined by a centre point and radius: center-x, center-y, radius.
Circle area
<area shape="circle" coords="500,160,80" href="/rooms/server" alt="Server Room" /> <!-- coords: center-x, center-y, radius (pixels) -->Polygon
Defined by a series of x,y coordinate pairs. Minimum three points. The polygon closes automatically.
Polygon area
<area shape="poly" coords="480,280,760,280,760,460,560,460,480,380" href="/rooms/office" alt="Open Office" /> <!-- coords: x1,y1, x2,y2, x3,y3, ... (pixels) -->Default
Covers the entire image surface not claimed by other areas. Useful as a catch-all link.
Default area
<area shape="default" href="/rooms/overview" alt="View building overview" /> <!-- Covers the entire image not matched by other areas -->| Shape | Coords format | Example |
|---|---|---|
rect | left, top, right, bottom | 40,40,320,220 |
circle | cx, cy, radius | 500,160,80 |
poly | x1,y1, x2,y2, ... | 480,280,760,280,... |
default | (none) | — |
Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
shape |
string | Yes | rect, circle, poly, or default |
coords |
string | Yes* | Comma-separated pixel coordinates. Not needed for shape="default". |
href |
URL | No | Navigation target. Without href, the area is not interactive. |
alt |
string | Yes** | Accessible text label. Required when href is present. |
target |
string | No | Link target: _self, _blank, _parent, _top |
download |
string | No | Triggers a download instead of navigation. Value sets the filename. |
rel |
string | No | Link relationship (noopener, noreferrer, etc.) |
title |
string | No | Tooltip text shown on hover. Plain text only. |
The Responsive Problem
The <area> coordinate system uses absolute pixel values matching the image’s natural dimensions. When the image scales responsively (as it does in every modern layout), the clickable regions no longer align with the visual regions.
For example, an area defined at coords="40,40,320,220" targets pixels 40–320 horizontally. If the image renders at half width (400px instead of 800px), those coordinates still reference the 800px space, and clicks land in the wrong place.
Modern replacement with percentage coordinates
<!-- Modern replacement: percentage coordinates + rich tooltips --><image-map> <img src="floor-plan.jpg" alt="Office floor plan" /> <map-area shape="rect" coords="5 8 40 44" label="Conference Hall" href="/rooms/conference"> <strong>Conference Hall</strong> <p>Seats 120 people.</p> </map-area> <map-area shape="circle" coords="62.5 32 10" label="Server Room" href="/rooms/server"> <strong>Server Room</strong> <p>24 racks, climate controlled.</p> </map-area></image-map>Accessibility
- Every
<area>with anhrefmust have analtattribute - Screen readers announce
alttext as the link label - Users navigate between areas with Tab
- No visible focus indicator exists on native areas — keyboard users cannot see which region has focus
- The
titleattribute provides hover tooltips but is not reliably announced by screen readers — do not use it as the sole accessible name
Related
<map>— container element that groups<area>elements<img>— the image element linked viausemap<a>— standard hyperlink (simpler alternative for single-link images)<image-map>— modern responsive replacement with percentage coordinates and rich tooltips