Add a hitmap on top of an image
===============================

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

Here are some things you need to know| 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.
  |

**Warning:** 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:


```html
<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:


```html
<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 void elements, but do require four attributes:

`shape`

`coords`

`shape` takes one of four values: `circle`, `rect`, `poly`, and `default`. (An `<area>` whose `shape` is `default` 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.


```html
<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.

Learn more
----------

* `<img>`
* `<map>`
* `<area>`
* Online image map editor