Image Map

HTML links and media

Image maps make clickable regions inside one image.

An image map combines an img element with a map element and one or more area elements. Each area defines a clickable shape on the image.

Image maps can be useful for diagrams, maps, floor plans or legacy interfaces, but they are not the default choice for modern responsive layouts.

If you use an image map, every clickable area needs clear alternative text and the coordinates must still work at the displayed image size.

usemap

Connects an img to a named map.

map name

Defines the clickable area collection.

area

Defines one clickable shape inside the image.

coords

Pixel coordinates that define the clickable region.

Syntax and structure

The img usemap value must match the map name.

The usemap value starts with #. The map name does not.

Small accessible image map

<img src="course-map.webp" alt="Course map with HTML, CSS and JavaScript areas" usemap="#course-map">

<map name="course-map">
  <area shape="rect" coords="0,0,200,160" href="#html-course" alt="Show HTML course details">
  <area shape="rect" coords="200,0,400,160" href="#css-course" alt="Show CSS course details">
</map>

Unclear clickable regions

<img src="map.jpg" usemap="#map">
<map name="map">
  <area coords="0,0,200,200" href="#">
  <area coords="200,0,400,200" href="#">
</map>

Rules that matter

Links and media should be useful, stable and understandable.

Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.

Match usemap and name

The img usemap="#course-map" connects to map name="course-map".

Write alt on areas

Each clickable region needs text that explains the destination.

Watch responsiveness

Coordinates can become inaccurate when images scale.

Prefer simpler HTML when possible

Cards, buttons or SVG links are often easier to maintain.

Use for diagrams

Image maps fit content where clickable regions are naturally spatial.

Test by keyboard and pointer

Clickable regions must be reachable and understandable.

Production thinking

Navigation, images and metadata are part of product quality.

Why does this matter?

This matters because image maps look simple but hide a lot of interaction inside one image. Without labels and testing, users may not know what is clickable.

Accessibility

Area alt text is critical because invisible clickable regions otherwise have no meaningful label.

Production note

Use image maps carefully. Responsive behavior, analytics and maintenance can become awkward compared with normal links or SVG.

SEO note

Image map links can be followed, but normal visible links with clear text are usually easier for users and crawlers.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Add a third area for JavaScript and point it to #js-course.
Add a hidden paragraph with id="js-course".
Run the preview and click each region without leaving the demo.

Practice assignment

Do this before moving to the next lesson.

Build an image map with at least two clickable areas.
Give every area a useful href and alt text.
Write down when a normal set of links would be better.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(780px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.eyebrow {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 10px 0 16px;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

p, figcaption {
  color: #cfd8e6;
  line-height: 1.7;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

a {
  color: #8cffc1;
  font-weight: 800;
}

nav a {
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.result-note {
  margin-top: 14px;
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(140, 255, 193, 0.1);
}

.demo-highlight {
  outline: 3px solid rgba(140, 255, 193, 0.55);
  outline-offset: 4px;
}

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?