← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 16 of 20

HTML Image Maps

An image map turns a single picture into a piece of interactive navigation, where different regions of the same image link to different destinations. Instead of cutting one picture into several separate linked images, you keep one image and define invisible clickable zones on top of it. This is the same idea behind clickable diagrams, interactive maps, or a single banner image where each icon links somewhere different, all without splitting the artwork apart.

In this page:

  1. What Is an Image Map?
  2. The usemap Attribute on <img>
  3. Defining Clickable Areas with <area>
  4. The shape and coords Attributes
  5. Accessibility for Image Maps
Syntax
markup 
<img src="image-url" usemap="#mapname" alt="Description">
<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Description">
</map>

What Is an Image Map?

An image map turns a single image into a clickable surface with several selectable regions, each linking to a different destination, instead of splitting one image into many separate linked images.

Note:
  • Image maps work best for genuinely image-based navigation, like a diagram or a real map, not as a substitute for a simple menu.
  • Accepted attributes:
  • img usemap — #mapname
  • map name — mapname
  • area shape / coords / href / alt
Warning: Image map regions do not resize automatically with a responsive image, so a scaled image can end up with hotspots pointing at the wrong parts of the picture.

Example: What Is an Image Map?

markup 
<img src="map.jpg" usemap="#worldmap" alt="World map">
<map name="worldmap">
  <area shape="rect" coords="0,0,100,100" href="asia.html" alt="Asia">
</map>

The usemap Attribute on <img>

The usemap attribute connects an <img> element to a <map> element by referencing the map's name, prefixed with a hash symbol, similar to linking to an in-page anchor.

Note:
  • Keep each map's name short and unique so it never collides with another map elsewhere on the page.
  • Accepted values:
  • usemap — hash-name reference, e.g. #planetmap
  • Must match a map element name
Warning: Forgetting the leading '#' in the usemap value silently breaks the connection, and the browser shows the image without any clickable areas.

Example: The usemap Attribute on <img>

markup 
<img src="diagram.jpg" usemap="#parts" alt="Diagram">
<map name="parts"></map>

Defining Clickable Areas with <area>

Each <area> element inside a <map> defines one clickable region, complete with its own href, alt text, and shape. Multiple <area> elements can sit inside a single map to create several hotspots on one image.

Note:
  • List area elements in the order they visually appear, which also affects the tab order for keyboard navigation.
  • Accepted attributes:
  • shape — rect | circle | poly | default
  • coords — depends on shape
  • href — link URL
  • alt — required text alternative
  • target — _self | _blank | _parent | _top
Warning: Overlapping area coordinates can make one region unreachable, since the browser only registers the first matching area.

Example: Defining Clickable Areas with <area>

markup 
<map name="parts">
  <area shape="rect" coords="0,0,50,50" href="engine.html" alt="Engine">
  <area shape="rect" coords="51,0,100,50" href="wheel.html" alt="Wheel">
</map>

The shape and coords Attributes

The shape attribute defines the geometry of a clickable area (rect, circle, or poly), while coords supplies the numeric coordinates that position and size that shape relative to the image's top-left corner.

Note:
  • Use an image editor or browser devtools to read pixel coordinates accurately before writing your coords values.
  • Accepted values:
  • rect — coords=x1,y1,x2,y2
  • circle — coords=x,y,radius
  • poly — coords=x1,y1,x2,y2,... pairs
  • default — whole image; no coords
Warning: A circle shape needs exactly three coords values (center-x, center-y, radius); supplying the wrong count silently breaks that area.

Example: The shape and coords Attributes

markup 
<map name="shapes">
  <area shape="circle" coords="50,50,30" href="center.html" alt="Center">
</map>

Accessibility for Image Maps

Every <area> element needs meaningful alt text, just like a regular link, so that screen reader users understand each region's destination even though the shapes themselves are invisible to assistive technology.

Note: Write alt text for each area the same way you would write link text elsewhere: describe the destination, not the shape.
Warning: An <area> without alt text is announced as an unlabeled link, making that part of the image map unusable for screen reader visitors.

Example: Accessibility for Image Maps

markup 
<map name="parts">
  <area shape="rect" coords="0,0,50,50" href="engine.html" alt="Go to Engine details">
</map>
Live Example
Related Topics

HTML Datalist · HTML Browser DevTools · HTML Output Element · HTML Validation

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to match the usemap value to the connected map's name attribute, including the leading '#'.
  2. Using coordinate values that don't line up with the actual visible regions of the image.
  3. Leaving out alt text on area elements, making the map unusable for screen reader visitors.
Chapter Summary
  • The <map> element defines a named set of clickable areas linked to an image through usemap.
  • Each <area> element defines one clickable region using a shape and matching coords.
  • Always provide alt text on every <area> element for accessibility.
Browser Support

Image maps are supported natively by every modern browser.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Datalist Next Lesson → HTML Browser DevTools

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.