HTML & CSS reference

<map>, <area>

An image map: different areas of a picture lead to different addresses.

Syntax

<map name="m"><area shape="rect" coords="…" href="…" alt="…"></map>

Attributes

Parameter	Type	Description
name	text	The map name; the image refers to it with `usemap="#name"`.
shape	rect \| circle \| poly	The shape of an `<area>`.
coords	numbers	The area coordinates in image pixels.
href, alt	URL, text	Where the area leads and its description.

Examples

Two clickable areas on a photo:

<img src="/media/photo-400x250.jpg" alt="Coffee shop" width="400" height="250" usemap="#shop">
 
<map name="shop">
  <area shape="rect" coords="0,0,200,250" href="#left" alt="Left half">
  <area shape="circle" coords="300,125,60" href="#right" alt="Circle on the right">
</map>

Notes

Coordinates are in pixels of the original size and do not scale with a fluid image — that is why responsive sites rarely use image maps and instead place links over the picture with CSS or SVG.

In the tutorial

Images — The img tag, the src and alt attributes, sizes, captions with figure and figcaption, image formats and lazy loading.

Thanks for reading!