HTML · Quick Reference

Lesson 13 — HTML Image Maps Cheat Sheet

HTML

In one line: Image maps connect three things: an <img> with a usemap attribute, a <map> element with a matching name, and <area> elements that define the clickable regions.

Key Ideas

1How Image Maps Work. Image maps connect three things: an <img> with a usemap attribute, a <map> element with a matching name, and <area> elements that define the clickabl...

2The Three Shape Types. Each <area> has a shape attribute. The coords values differ depending on the shape:

3Accessibility & Modern Alternatives. Image maps have accessibility challenges — the clickable regions aren't visible and screen readers may navigate them poorly. Always include descriptive alt on each <...

4Finding Coordinates. The hardest part of image maps is getting the pixel coordinates right. Here are three ways:

Code Examples

<!-- Step 1: img with usemap pointing to the map name -->
<img
  src="world-map.jpg"
  alt="World map — click a region to explore"
  width="800"
  height="400"
  usemap="#worldmap"
>

<!-- Step 2: map element — name must match usemap...

<map name="shapes">
  <!-- Rectangle: x1=10,y1=10 to x2=100,y2=80 -->
  <area
    shape="rect"
    coords="10,10,100,80"
    href="/section-a"
    alt="Section A"
  >

  <!-- Circle: centre at 200,60, radius 50px -->
  <...

// Click anywhere on an image to get its pixel coordinates
const img = document.querySelector('img');

img.addEventListener('click', function(e) {
  const rect = img.getBoundingClientRect();
  const x = Math.round(e.clientX - rect.left);
  const y = M...