Add a hit map on top of an image

Here we go over how to set up an image map, and some downsides to consider first.

Prerequisites:	You should already know how to create a basic HTML document and how to add accessible images to a webpage.
Objective:	Learn how to make different regions of one image link to different pages.

This article discusses client-side image maps only. Do not use server-side image maps, which require the user to have a mouse.

Image maps, and their drawbacks

When you nest an image inside <a>, the entire image links to one webpage. An image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource.

Formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their performance and accessibility ramifications.

Text links (perhaps styled with CSS) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more SEO-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).

How to insert an image map, properly

Step 1: The image

Not just any image is acceptable.

The image must make it clear what happens when people follow image links. alt text is mandatory, of course, but many people never see it.
The image must clearly indicate where hotspots begin and end.
Hotspots must be large enough to tap comfortably, at any viewport size. How large is large enough? 72 × 72 CSS pixels is a good minimum, with additional generous gaps between touch targets. The map of the world at 50languages.com (as of time of writing) illustrates the problem perfectly. It’s much easier to tap Russia or North America than Albania or Estonia.

You insert your image much the same way as always (with an <img> element and alt text). If the image is only present as a navigation device, you may write alt="", provided you furnish appropriate alt text in the <area> elements later on.

You will need a special usemap attribute. Come up with a unique name, containing no spaces, for your image map. Then assign that name (preceded by a hash) as the value for the usemap attribute:

<img 
  src="image-map.png"
  alt=""
  usemap="#example-map-1" />

Step 2: Activate your hotspots

In this step, put all your code inside a <map> element. <map> only needs one attribute, the same map name as you used in your usemap attribute above:

<map name="example-map-1">

</map>

Inside the <map> element, we need <area> elements. An <area> element corresponds to a single hotspot. To keep keyboard navigation intuitive, make sure the source order of <area> elements corresponds to the visual order of hotspots.

<area> elements are empty elements, but do require four attributes:

shape

coords

shape takes one of four values: circle, rect, poly, and default. (A default <area> occupies the entire image, minus any other hotspots you’ve defined.) The shape you choose determines the coordinate information you’ll need to provide in coords.

For a circle, provide the center's x and y coordinates, followed by the length of the radius.
For a rectangle, provide the x/y coordinates of the upper-left and bottom-right corners.
For a polygon, to provide the x/y coordinates of each corner (so, at least six values).

Coordinates are given in CSS pixels.

In case of overlap, source order carries the day.

href

The URL of the resource you’re linking to. You may leave this attribute blank if you don’t want the current area to link anywhere (say, if you’re making a hollow circle.)

alt

A mandatory attribute, telling people where the link goes or what it does. alt text only displays when the image is unavailable. Please refer to our guidelines for writing accessible link text.

You may write alt="" if the href attribute is blank and the entire image already has an alt attribute.

<map name="example-map-1">
  <area shape="circle" coords="200,250,25"
    href="page-2.html" alt="circle example" /> 


  <area shape="rect" coords="10, 5, 20, 15"
    href="page-3.html" alt="rectangle example" />

</map>

Step 3: Make sure it works for everybody

You aren’t done until you test image maps rigorously on many browsers and devices. Try following links with your keyboard alone. Try turning images off.

If your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. It's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image.

If you must use image maps, you may want to look into Matt Stow's jQuery plugin. Alternatively, Dudley Storey demonstrates a way to use SVG for an image map effect, along with a subsequent combined SVG-raster hack for bitmap images.