Image Links and Image Maps in HTML

An image as a link

Put the img inside an a.

1
2
3

<a href="index.html">
  <img src="https://placehold.co/120x40/ca4b00/ffffff?text=Logo" alt="Juniper Books home">
</a>

The alt text becomes the link text for screen readers, so it should say where the link goes (“Juniper Books home”), not describe the logo.

Image maps

An image map gives different areas of one image different links. You define the shapes with map and area and connect them to the image with usemap.

1
2
3
4
5
6

<img src="floor-plan.png" alt="Shop floor plan" usemap="#floor" width="600" height="300">

<map name="floor">
  <area shape="rect" coords="0,0,300,300" href="fiction.html" alt="Fiction section">
  <area shape="circle" coords="450,150,60" href="cafe.html" alt="Café corner">
</map>

The coordinates are measured in pixels from the top left of the image. A rect takes left, top, right and bottom. A circle takes the centre point and the radius.

Should you use image maps?

Image maps are rare today. They do not scale automatically on small screens, and the coordinates are easy to get wrong. For many uses a set of normal links positioned with CSS is a better choice. They are still useful for things like clickable floor plans and diagrams.