Path // www.yourhtmlsource.com → Reference → <MAP> ELEMENT

<map> element

by Ross Shannon

The <map> element defines a client-side image map, which is an image with clickable areas. It contains <area> elements that define the clickable regions and their destinations. The map is associated with an image using the usemap attribute on the <img> element.

Clock This page was last updated on 2025-11-17


Syntax

The <map> element contains <area> elements and is linked to an image:

<img src="planets.jpg" alt="Solar System" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="90,58,30" href="mercury.html" alt="Mercury">
  <area shape="circle" coords="180,139,40" href="venus.html" alt="Venus">
  <area shape="circle" coords="280,200,50" href="earth.html" alt="Earth">
</map>

Key Attributes

  • name (required) — The name of the map. This must match the usemap attribute on the associated image (without the # prefix).

The name attribute is the only required attribute for the <map> element. The actual clickable regions are defined using <area> elements inside the map.

Examples

Simple Navigation Image Map

<img src="navbar.png" alt="Site Navigation" usemap="#navmap" width="600" height="50">

<map name="navmap">
  <area shape="rect" coords="0,0,150,50" href="/" alt="Home">
  <area shape="rect" coords="150,0,300,50" href="/products/" alt="Products">
  <area shape="rect" coords="300,0,450,50" href="/services/" alt="Services">
  <area shape="rect" coords="450,0,600,50" href="/contact/" alt="Contact">
</map>

Geographic Map with Regions

<img src="us-map.png" alt="United States Map" usemap="#usmap" width="800" height="500">

<map name="usmap">
  <area
    shape="poly"
    coords="50,100,100,80,150,100,120,150,60,140"
    href="california.html"
    alt="California">
  <area
    shape="poly"
    coords="600,150,650,130,700,160,680,200,620,190"
    href="florida.html"
    alt="Florida">
  <area
    shape="rect"
    coords="400,100,500,180"
    href="texas.html"
    alt="Texas">
</map>

Interactive Diagram

<img src="computer-parts.jpg" alt="Computer Diagram" usemap="#pcmap">

<map name="pcmap">
  <area shape="rect" coords="20,50,200,150" href="cpu.html" alt="CPU - Central Processing Unit">
  <area shape="rect" coords="220,50,400,150" href="ram.html" alt="RAM - Memory">
  <area shape="circle" coords="150,250,60" href="hdd.html" alt="Hard Drive Storage">
  <area shape="poly" coords="300,200,400,200,450,250,350,300,250,250" href="gpu.html" alt="Graphics Card">
</map>

When to Use

Appropriate Use Cases:

  • Geographic maps where different regions link to different pages
  • Organizational charts with clickable positions
  • Product images with clickable components
  • Educational diagrams with interactive parts
  • Floor plans with clickable rooms or areas

Accessibility Best Practices:

  • Always provide meaningful alt text for each <area> element
  • The base image should have descriptive alt text explaining the overall image
  • Areas are keyboard-navigable — users can tab through clickable regions
  • Screen readers announce each area’s alt text when focused
  • Consider providing a text-based list of links as an alternative for complex maps
  • Ensure clickable areas are large enough for easy mouse/touch interaction

Important Considerations:

  • Image maps are not responsive — coordinates are fixed pixel values
  • If the image is resized, the clickable areas won’t adjust automatically
  • For responsive designs, consider using SVG with embedded links instead
  • The map can be placed anywhere in the document, not necessarily near the image

Modern Alternatives:

  • SVG with links — Scalable, styleable, and responsive
  • CSS positioned overlays — Flexible and responsive
  • JavaScript-based solutions — Dynamic and interactive
  • Responsive image map libraries — Automatically adjust coordinates on resize
  • <area> — Defines clickable regions within the map
  • <img> — Image element with usemap attribute
  • <a> — Standard hyperlink element
  • <object> — Can also use image maps via usemap