🔗 Phase 3 · Links & Media🟡 IntermediateModule 04

HTML Image Maps

⏱ 18 min read📖 4 sections🧩 5-question quiz

Course Progress37% complete

An image map lets you define clickable regions on a single image — different areas link to different destinations. Think of a world map where clicking each country goes to a different page. They're created using the <map> element with <area> children, and linked to an image via the usemap attribute.

Section 1

How 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 clickable regions.

HTMLImage map structure

<!-- 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 (without #) -->
<map name="worldmap">
  <!-- Step 3: area elements define each clickable region -->
  <area shape="rect" coords="0,0,200,400" href="/americas" alt="The Americas">
  <area shape="rect" coords="200,0,500,400" href="/europe-africa" alt="Europe & Africa">
  <area shape="rect" coords="500,0,800,400" href="/asia-pacific" alt="Asia Pacific">
</map>

Section 2

The Three Shape Types

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

Shape	coords format	Description
`rect`	`x1,y1,x2,y2`	Top-left corner to bottom-right corner
`circle`	`cx,cy,radius`	Centre x, centre y, radius in pixels
`poly`	`x1,y1,x2,y2,x3,y3,...`	Pairs of x,y coordinates for each vertex
`default`	none	Covers the entire image (fallback area)

HTMLAll three shapes

<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 -->
  <area
    shape="circle"
    coords="200,60,50"
    href="/section-b"
    alt="Section B"
  >

  <!-- Triangle polygon: 3 vertices -->
  <area
    shape="poly"
    coords="300,10,400,110,200,110"
    href="/section-c"
    alt="Section C"
  >
</map>

Section 3

Accessibility & 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 <area>, and consider whether CSS/SVG is a better modern alternative.

⚠️

Image maps don't scale well

Pixel coordinates are fixed to the original image dimensions. If your image scales responsively (CSS width:100%), the clickable areas won't match the visible regions. For responsive designs, use CSS absolute positioning over a container, or SVG <a> elements instead.

💡

When image maps are still useful

Fixed-size interactive diagrams, floor plans, anatomy charts, or geographic maps where precise clickable regions matter. They're still valid HTML5 — just use them thoughtfully.

Section 4

Finding Coordinates

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

JSGet mouse coordinates with JavaScript

// 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 = Math.round(e.clientY - rect.top);
  console.log(`x: ${x}, y: ${y}`);
});

🧩 Quick Check — Lesson 13

5 questions · instant feedback

1. Which attribute on <img> links it to a <map> element?

2. What coords format does shape="circle" use?

3. What is the main accessibility problem with image maps?

4. What does shape="default" on an <area> element do?

5. Why do pixel-based image map coordinates break on responsive images?

🏆

Quiz Complete!

Image maps done! Moving to favicons.

🏆

Lesson 13 Challenge

Code exercise · 15 min

Create an interactive solar system image map.

Using any solar system image (or a simple SVG placeholder), create:

1. An image map with at least 3 planets as clickable areas
2. Use shape="circle" for each planet
3. Each area should have a descriptive alt attribute
4. Each area should link to #planet-name anchors below the image
5. Create matching <section id="planet-name"> elements with a short description

Show hints

Use browser DevTools (right-click image → Inspect) to help estimate coords
usemap="#mapname" must match map name="mapname" (without the #)
Each <area> needs: shape, coords, href, and alt
Test by hovering over the image — cursor should change to pointer on hot spots

← Images

Lesson 13 of 35

Favicons →