6.2 — Image Maps
A single static image can become an interactive navigation surface. With the <map> and <area> elements, you can draw invisible geometric hotspots on top of a graphic, each linking to a different destination. This technique is perfect for datacenter diagrams, geographical maps, and engineering schematics.
The Pixel Coordinate System
Every image has a built‑in grid. The origin (0,0) sits at the top‑left corner. The x‑axis increases as you move right; the y‑axis increases as you move down. Any pixel can be referenced by its (x, y) pair.
Linking the Image to a Map
The <img> element connects to a <map> via the usemap attribute. The value must be a hash (#) followed by the map’s name.
<img src="datacenter.png"
width="1200" height="600"
usemap="#dc-master"
alt="Server room floor plan">
<map name="dc-master">
<!-- area elements go here -->
</map>
The name on the <map> (without the hash) must match the hash value in usemap.
The Three Geometric Shapes
Inside the <map>, you place void <area> elements. Each one defines a clickable region with a shape and a set of coords. The coordinate format changes depending on the shape.
Rectangle – shape="rect"
Requires four values: x1, y1, x2, y2. The first pair is the top‑left corner; the second is the bottom‑right corner.
<area shape="rect" coords="50,50,300,350"
href="/rack-alpha" alt="Server Rack Alpha">
Circle – shape="circle"
Requires three values: x, y, radius. The first two are the center point; the third is the radius in pixels.
<area shape="circle" coords="600,300,85"
href="/backbone-switch" alt="Core Switch">
Polygon – shape="poly"
Accepts an unlimited list of pairs: x1,y1,x2,y2,x3,y3,…. The browser automatically closes the shape by connecting the last point back to the first.
<area shape="poly" coords="900,100,1150,100,1150,500,1000,500,1000,300,900,300"
href="/security-vault" alt="Crypto Vault">
Every <area> must have an alt attribute describing its destination – just like an <img>.
Traditional image maps use static pixel coordinates. If you resize the image with CSS (width: 100%), the hotspots do not scale – they stay at their original positions, breaking the interaction. For fluid, responsive interfaces, consider inline SVG with built‑in scalable coordinate systems instead.
Enterprise Blueprint – Datacenter Navigation Map
The following complete example maps a server‑room floor plan with three interactive zones: a rectangle for a server rack, a circle for a core switch, and a polygon for a security vault.
<img src="assets/datacenter-infrastructure.png"
width="1200" height="600"
usemap="#dc-master"
loading="lazy"
alt="Main server room floor plan layout diagram">
<map name="dc-master">
<area shape="rect"
coords="50,50,300,350"
href="/infrastructure/rack-alpha-core"
alt="Access telemetry records for Server Rack Alpha Core section">
<area shape="circle"
coords="600,300,85"
href="/network/backbone-switch"
alt="Inspect diagnostics for Central Core Distribution Switch">
<area shape="poly"
coords="900,100,1150,100,1150,500,1000,500,1000,300,900,300"
href="/security/environmental-vault"
alt="Review environmental containment status flags for Cryptographic Storage Vault Sector">
</map>
When a user clicks any of the defined regions, the browser navigates to the corresponding URL. Screen readers announce the alt text for each hotspot, making the map fully accessible.
Image maps turn static graphics into interactive navigation surfaces. Master the pixel coordinate system, choose the right shape (rect, circle, poly), supply the correct coords for that shape, and always provide an alt description. While they are not responsive by default, image maps remain a powerful tool for fixed‑layout diagrams, schematics, and technical illustrations.