<map> - The Image Map Element

The `<map>` Element

Media Element HTML 2.0

The map element defines a client-side image map, allowing you to create clickable regions within an image. Each clickable area is defined using <area> elements, making parts of an image interactive without requiring separate image files.

Quick Example

<img src="https://picsum.photos/600/400"
   alt="Clickable image map"
   usemap="#demo-map"
   width="600"
   height="400">

<map name="demo-map">
<area shape="rect"
      coords="0,0,300,200"
      href="#top-left"
      alt="Top left quadrant">

<area shape="rect"
      coords="300,0,600,200"
      href="#top-right"
      alt="Top right quadrant">

<area shape="rect"
      coords="0,200,300,400"
      href="#bottom-left"
      alt="Bottom left quadrant">

<area shape="rect"
      coords="300,200,600,400"
      href="#bottom-right"
      alt="Bottom right quadrant">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/400"
   alt="Clickable image map"
   usemap="#demo-map"
   width="600"
   height="400">

<map name="demo-map">
<area shape="rect"
      coords="0,0,300,200"
      href="#top-left"
      alt="Top left quadrant">

<area shape="rect"
      coords="300,0,600,200"
      href="#top-right"
      alt="Top right quadrant">

<area shape="rect"
      coords="0,200,300,400"
      href="#bottom-left"
      alt="Bottom left quadrant">

<area shape="rect"
      coords="300,200,600,400"
      href="#bottom-right"
      alt="Bottom right quadrant">
</map>

Syntax

<img src="image.jpg" usemap="#mapname" alt="Description">

<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="link.html" alt="Region 1">
  <area shape="circle" coords="x,y,radius" href="link2.html" alt="Region 2">
</map>

Essential Attributes

name (Required)

Identifies the map so images can reference it:

<img src="https://picsum.photos/500/300"
   alt="Image with map"
   usemap="#my-map"
   width="500"
   height="300">

<map name="my-map">
<area shape="rect"
      coords="0,0,250,150"
      href="#region1"
      alt="Region 1">
<area shape="rect"
      coords="250,150,500,300"
      href="#region2"
      alt="Region 2">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/500/300"
   alt="Image with map"
   usemap="#my-map"
   width="500"
   height="300">

<map name="my-map">
<area shape="rect"
      coords="0,0,250,150"
      href="#region1"
      alt="Region 1">
<area shape="rect"
      coords="250,150,500,300"
      href="#region2"
      alt="Region 2">
</map>

Connecting Images to Maps

usemap Attribute

Link an image to a map using the usemap attribute:

✓ Correct
✗ Incorrect

<!-- Image references map -->
<img src="diagram.png" usemap="#diagram-map" alt="Diagram">

<!-- Map definition -->
<map name="diagram-map">
  <area shape="rect" coords="10,10,100,100" href="#section1" alt="Section 1">
</map>

<!-- Missing # in usemap -->
<img src="diagram.png" usemap="diagram-map" alt="Diagram">

<!-- Name doesn't match -->
<img src="diagram.png" usemap="#diagram-map" alt="Diagram">
<map name="other-map">
  <area shape="rect" coords="10,10,100,100" href="#section1" alt="Section 1">
</map>

Multiple Images, Same Map

Multiple images can reference the same map:

<style>
.mapped-img { border: 2px solid #3b82f6; margin: 10px; }
</style>

<img src="https://picsum.photos/400/300?random=1"
   alt="Image 1"
   usemap="#shared-map"
   class="mapped-img"
   width="400"
   height="300">

<img src="https://picsum.photos/400/300?random=2"
   alt="Image 2"
   usemap="#shared-map"
   class="mapped-img"
   width="400"
   height="300">

<map name="shared-map">
<area shape="circle"
      coords="200,150,100"
      href="#center"
      alt="Center region">
</map>

<p>Both images use the same map definition</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.mapped-img { border: 2px solid #3b82f6; margin: 10px; }
</style>

<img src="https://picsum.photos/400/300?random=1"
   alt="Image 1"
   usemap="#shared-map"
   class="mapped-img"
   width="400"
   height="300">

<img src="https://picsum.photos/400/300?random=2"
   alt="Image 2"
   usemap="#shared-map"
   class="mapped-img"
   width="400"
   height="300">

<map name="shared-map">
<area shape="circle"
      coords="200,150,100"
      href="#center"
      alt="Center region">
</map>

<p>Both images use the same map definition</p>

Creating Clickable Regions

Maps contain <area> elements that define clickable regions:

<img src="https://picsum.photos/600/400"
   alt="Multiple regions"
   usemap="#regions-map"
   width="600"
   height="400"
   style="border: 2px solid #3b82f6;">

<map name="regions-map">
<!-- Rectangle: top-left -->
<area shape="rect"
      coords="50,50,250,200"
      href="#rect"
      alt="Rectangle region"
      title="Click rectangle">

<!-- Circle: top-right -->
<area shape="circle"
      coords="450,125,75"
      href="#circle"
      alt="Circle region"
      title="Click circle">

<!-- Polygon: bottom -->
<area shape="poly"
      coords="300,250,450,250,375,350"
      href="#triangle"
      alt="Triangle region"
      title="Click triangle">
</map>

<div id="clicked" style="margin-top: 1rem; padding: 1rem; border: 1px solid #ccc;">
Click a region to see feedback
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('clicked').textContent =
      'Clicked: ' + area.alt + ' (href: ' + area.href + ')';
  });
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/400"
   alt="Multiple regions"
   usemap="#regions-map"
   width="600"
   height="400"
   style="border: 2px solid #3b82f6;">

<map name="regions-map">
<!-- Rectangle: top-left -->
<area shape="rect"
      coords="50,50,250,200"
      href="#rect"
      alt="Rectangle region"
      title="Click rectangle">

<!-- Circle: top-right -->
<area shape="circle"
      coords="450,125,75"
      href="#circle"
      alt="Circle region"
      title="Click circle">

<!-- Polygon: bottom -->
<area shape="poly"
      coords="300,250,450,250,375,350"
      href="#triangle"
      alt="Triangle region"
      title="Click triangle">
</map>

<div id="clicked" style="margin-top: 1rem; padding: 1rem; border: 1px solid #ccc;">
Click a region to see feedback
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('clicked').textContent =
      'Clicked: ' + area.alt + ' (href: ' + area.href + ')';
  });
});
</script>

Shape Types

Rectangle (rect)

Define rectangular regions with top-left and bottom-right coordinates:

<!-- coords: x1,y1,x2,y2 -->
<area shape="rect" coords="10,10,200,100" href="link.html" alt="Rectangle">

<img src="https://picsum.photos/600/300"
   alt="Rectangle demo"
   usemap="#rect-map"
   width="600"
   height="300">

<map name="rect-map">
<!-- Top half -->
<area shape="rect"
      coords="0,0,600,150"
      href="#top"
      alt="Top half"
      style="cursor: pointer;">

<!-- Bottom half -->
<area shape="rect"
      coords="0,150,600,300"
      href="#bottom"
      alt="Bottom half">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/300"
   alt="Rectangle demo"
   usemap="#rect-map"
   width="600"
   height="300">

<map name="rect-map">
<!-- Top half -->
<area shape="rect"
      coords="0,0,600,150"
      href="#top"
      alt="Top half"
      style="cursor: pointer;">

<!-- Bottom half -->
<area shape="rect"
      coords="0,150,600,300"
      href="#bottom"
      alt="Bottom half">
</map>

Circle (circle)

Define circular regions with center coordinates and radius:

<!-- coords: centerX,centerY,radius -->
<area shape="circle" coords="100,100,50" href="link.html" alt="Circle">

<img src="https://picsum.photos/600/400"
   alt="Circle demo"
   usemap="#circle-map"
   width="600"
   height="400">

<map name="circle-map">
<!-- Center circle -->
<area shape="circle"
      coords="300,200,100"
      href="#center"
      alt="Center circle">

<!-- Top-left circle -->
<area shape="circle"
      coords="150,100,60"
      href="#top-left"
      alt="Top left circle">

<!-- Bottom-right circle -->
<area shape="circle"
      coords="450,300,60"
      href="#bottom-right"
      alt="Bottom right circle">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/400"
   alt="Circle demo"
   usemap="#circle-map"
   width="600"
   height="400">

<map name="circle-map">
<!-- Center circle -->
<area shape="circle"
      coords="300,200,100"
      href="#center"
      alt="Center circle">

<!-- Top-left circle -->
<area shape="circle"
      coords="150,100,60"
      href="#top-left"
      alt="Top left circle">

<!-- Bottom-right circle -->
<area shape="circle"
      coords="450,300,60"
      href="#bottom-right"
      alt="Bottom right circle">
</map>

Polygon (poly)

Define irregular shapes with multiple coordinate pairs:

<!-- coords: x1,y1,x2,y2,x3,y3,... -->
<area shape="poly" coords="0,0,100,0,50,100" href="link.html" alt="Triangle">

<img src="https://picsum.photos/600/400"
   alt="Polygon demo"
   usemap="#poly-map"
   width="600"
   height="400">

<map name="poly-map">
<!-- Triangle -->
<area shape="poly"
      coords="300,50,450,200,150,200"
      href="#triangle"
      alt="Triangle region">

<!-- Pentagon (bottom) -->
<area shape="poly"
      coords="300,250,400,280,380,360,220,360,200,280"
      href="#pentagon"
      alt="Pentagon region">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/400"
   alt="Polygon demo"
   usemap="#poly-map"
   width="600"
   height="400">

<map name="poly-map">
<!-- Triangle -->
<area shape="poly"
      coords="300,50,450,200,150,200"
      href="#triangle"
      alt="Triangle region">

<!-- Pentagon (bottom) -->
<area shape="poly"
      coords="300,250,400,280,380,360,220,360,200,280"
      href="#pentagon"
      alt="Pentagon region">
</map>

Default (entire image)

Catch-all region covering the entire image:

<area shape="default" href="fallback.html" alt="Default region">

<img src="https://picsum.photos/600/300"
   alt="Default region demo"
   usemap="#default-map"
   width="600"
   height="300">

<map name="default-map">
<!-- Specific region -->
<area shape="circle"
      coords="300,150,80"
      href="#specific"
      alt="Specific region">

<!-- Default: everything else -->
<area shape="default"
      href="#default"
      alt="Background area">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/300"
   alt="Default region demo"
   usemap="#default-map"
   width="600"
   height="300">

<map name="default-map">
<!-- Specific region -->
<area shape="circle"
      coords="300,150,80"
      href="#specific"
      alt="Specific region">

<!-- Default: everything else -->
<area shape="default"
      href="#default"
      alt="Background area">
</map>

Practical Examples

<style>
.nav-map { border: 3px solid #3b82f6; border-radius: 8px; }
</style>

<img src="https://via.placeholder.com/800x200/3b82f6/ffffff?text=Website+Header"
   alt="Website navigation"
   usemap="#nav-map"
   class="nav-map"
   width="800"
   height="200">

<map name="nav-map">
<!-- Logo area -->
<area shape="rect"
      coords="20,50,150,150"
      href="#home"
      alt="Home">

<!-- Navigation items -->
<area shape="rect"
      coords="200,80,320,120"
      href="#products"
      alt="Products">

<area shape="rect"
      coords="340,80,460,120"
      href="#services"
      alt="Services">

<area shape="rect"
      coords="480,80,600,120"
      href="#about"
      alt="About">

<area shape="rect"
      coords="620,80,740,120"
      href="#contact"
      alt="Contact">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.nav-map { border: 3px solid #3b82f6; border-radius: 8px; }
</style>

<img src="https://via.placeholder.com/800x200/3b82f6/ffffff?text=Website+Header"
   alt="Website navigation"
   usemap="#nav-map"
   class="nav-map"
   width="800"
   height="200">

<map name="nav-map">
<!-- Logo area -->
<area shape="rect"
      coords="20,50,150,150"
      href="#home"
      alt="Home">

<!-- Navigation items -->
<area shape="rect"
      coords="200,80,320,120"
      href="#products"
      alt="Products">

<area shape="rect"
      coords="340,80,460,120"
      href="#services"
      alt="Services">

<area shape="rect"
      coords="480,80,600,120"
      href="#about"
      alt="About">

<area shape="rect"
      coords="620,80,740,120"
      href="#contact"
      alt="Contact">
</map>

Floor Plan

<img src="https://via.placeholder.com/600x400/e5e7eb/374151?text=Floor+Plan"
   alt="Office floor plan"
   usemap="#floor-map"
   width="600"
   height="400"
   style="border: 2px solid #9ca3af;">

<map name="floor-map">
<!-- Office 1 -->
<area shape="rect"
      coords="50,50,250,180"
      href="#office1"
      alt="Office 1 - Marketing"
      title="Office 1">

<!-- Office 2 -->
<area shape="rect"
      coords="350,50,550,180"
      href="#office2"
      alt="Office 2 - Sales"
      title="Office 2">

<!-- Conference Room -->
<area shape="rect"
      coords="150,220,450,350"
      href="#conference"
      alt="Conference Room"
      title="Conference Room">
</map>

<div id="room-info" style="margin-top: 1rem; padding: 1rem; background: #f3f4f6;">
Hover over rooms to see details
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('mouseenter', function() {
    document.getElementById('room-info').textContent = this.alt;
  });
  area.addEventListener('click', (e) => e.preventDefault());
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/600x400/e5e7eb/374151?text=Floor+Plan"
   alt="Office floor plan"
   usemap="#floor-map"
   width="600"
   height="400"
   style="border: 2px solid #9ca3af;">

<map name="floor-map">
<!-- Office 1 -->
<area shape="rect"
      coords="50,50,250,180"
      href="#office1"
      alt="Office 1 - Marketing"
      title="Office 1">

<!-- Office 2 -->
<area shape="rect"
      coords="350,50,550,180"
      href="#office2"
      alt="Office 2 - Sales"
      title="Office 2">

<!-- Conference Room -->
<area shape="rect"
      coords="150,220,450,350"
      href="#conference"
      alt="Conference Room"
      title="Conference Room">
</map>

<div id="room-info" style="margin-top: 1rem; padding: 1rem; background: #f3f4f6;">
Hover over rooms to see details
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('mouseenter', function() {
    document.getElementById('room-info').textContent = this.alt;
  });
  area.addEventListener('click', (e) => e.preventDefault());
});
</script>

Product Features

<img src="https://via.placeholder.com/600/400/6366f1/ffffff?text=Smartphone"
   alt="Smartphone features"
   usemap="#phone-map"
   width="600"
   height="400">

<map name="phone-map">
<!-- Screen -->
<area shape="rect"
      coords="150,100,450,300"
      href="#screen"
      alt="6.5-inch OLED Display"
      title="Display">

<!-- Camera -->
<area shape="circle"
      coords="300,50,30"
      href="#camera"
      alt="48MP Triple Camera"
      title="Camera">

<!-- Power Button -->
<area shape="rect"
      coords="460,150,480,200"
      href="#power"
      alt="Power Button"
      title="Power">

<!-- Volume Buttons -->
<area shape="rect"
      coords="460,220,480,280"
      href="#volume"
      alt="Volume Controls"
      title="Volume">
</map>

<div id="feature" style="margin-top: 1rem; padding: 1rem; background: #eef2ff; border-radius: 4px;">
Click features to learn more
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('feature').innerHTML =
      '<strong>' + area.alt + '</strong><br>Click for details';
  });
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/600/400/6366f1/ffffff?text=Smartphone"
   alt="Smartphone features"
   usemap="#phone-map"
   width="600"
   height="400">

<map name="phone-map">
<!-- Screen -->
<area shape="rect"
      coords="150,100,450,300"
      href="#screen"
      alt="6.5-inch OLED Display"
      title="Display">

<!-- Camera -->
<area shape="circle"
      coords="300,50,30"
      href="#camera"
      alt="48MP Triple Camera"
      title="Camera">

<!-- Power Button -->
<area shape="rect"
      coords="460,150,480,200"
      href="#power"
      alt="Power Button"
      title="Power">

<!-- Volume Buttons -->
<area shape="rect"
      coords="460,220,480,280"
      href="#volume"
      alt="Volume Controls"
      title="Volume">
</map>

<div id="feature" style="margin-top: 1rem; padding: 1rem; background: #eef2ff; border-radius: 4px;">
Click features to learn more
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('feature').innerHTML =
      '<strong>' + area.alt + '</strong><br>Click for details';
  });
});
</script>

<img src="https://via.placeholder.com/700/300/8b5cf6/ffffff?text=Data+Infographic"
   alt="Data infographic"
   usemap="#infographic-map"
   width="700"
   height="300">

<map name="infographic-map">
<!-- Section 1: Revenue -->
<area shape="rect"
      coords="20,50,220,250"
      href="#revenue"
      alt="Revenue: $2.5M"
      title="Revenue">

<!-- Section 2: Growth -->
<area shape="rect"
      coords="240,50,460,250"
      href="#growth"
      alt="Growth: +35%"
      title="Growth">

<!-- Section 3: Users -->
<area shape="rect"
      coords="480,50,680,250"
      href="#users"
      alt="Users: 100K+"
      title="Users">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/700/300/8b5cf6/ffffff?text=Data+Infographic"
   alt="Data infographic"
   usemap="#infographic-map"
   width="700"
   height="300">

<map name="infographic-map">
<!-- Section 1: Revenue -->
<area shape="rect"
      coords="20,50,220,250"
      href="#revenue"
      alt="Revenue: $2.5M"
      title="Revenue">

<!-- Section 2: Growth -->
<area shape="rect"
      coords="240,50,460,250"
      href="#growth"
      alt="Growth: +35%"
      title="Growth">

<!-- Section 3: Users -->
<area shape="rect"
      coords="480,50,680,250"
      href="#users"
      alt="Users: 100K+"
      title="Users">
</map>

Accessibility

Alt Text is Required

Every <area> must have descriptive alt text:

✓ Good
✗ Bad

<map name="world-map">
  <area shape="rect"
        coords="0,0,200,100"
        href="/europe"
        alt="Navigate to Europe section">

  <area shape="rect"
        coords="200,0,400,100"
        href="/asia"
        alt="Navigate to Asia section">
</map>

<map name="world-map">
  <!-- Missing alt text -->
  <area shape="rect" coords="0,0,200,100" href="/europe">

  <!-- Vague alt text -->
  <area shape="rect" coords="200,0,400,100" href="/asia" alt="Region 2">
</map>

<img src="https://picsum.photos/600/300"
   alt="Keyboard accessible map"
   usemap="#accessible-map"
   width="600"
   height="300">

<map name="accessible-map">
<!-- Areas are keyboard focusable by default -->
<area shape="rect"
      coords="0,0,300,150"
      href="#region1"
      alt="Region 1: Top Left"
      title="Press Enter to navigate">

<area shape="rect"
      coords="300,0,600,150"
      href="#region2"
      alt="Region 2: Top Right">

<area shape="rect"
      coords="0,150,300,300"
      href="#region3"
      alt="Region 3: Bottom Left">

<area shape="rect"
      coords="300,150,600,300"
      href="#region4"
      alt="Region 4: Bottom Right">
</map>

<p>Use Tab to navigate between regions, Enter to activate</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/300"
   alt="Keyboard accessible map"
   usemap="#accessible-map"
   width="600"
   height="300">

<map name="accessible-map">
<!-- Areas are keyboard focusable by default -->
<area shape="rect"
      coords="0,0,300,150"
      href="#region1"
      alt="Region 1: Top Left"
      title="Press Enter to navigate">

<area shape="rect"
      coords="300,0,600,150"
      href="#region2"
      alt="Region 2: Top Right">

<area shape="rect"
      coords="0,150,300,300"
      href="#region3"
      alt="Region 3: Bottom Left">

<area shape="rect"
      coords="300,150,600,300"
      href="#region4"
      alt="Region 4: Bottom Right">
</map>

<p>Use Tab to navigate between regions, Enter to activate</p>

Provide Text Alternative

For complex image maps, provide a text-based alternative:

<figure>
<img src="https://via.placeholder.com/600x400/3b82f6/ffffff?text=Campus+Map"
     alt="Campus map (see list below for text navigation)"
     usemap="#campus-map"
     width="600"
     height="400">

<map name="campus-map">
  <area shape="rect" coords="50,50,200,150" href="#library" alt="Library">
  <area shape="rect" coords="250,50,400,150" href="#cafeteria" alt="Cafeteria">
  <area shape="rect" coords="450,50,550,150" href="#gym" alt="Gymnasium">
</map>

<figcaption>
  <strong>Campus Buildings:</strong>
  <ul>
    <li><a href="#library">Library</a></li>
    <li><a href="#cafeteria">Cafeteria</a></li>
    <li><a href="#gym">Gymnasium</a></li>
  </ul>
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/600x400/3b82f6/ffffff?text=Campus+Map"
     alt="Campus map (see list below for text navigation)"
     usemap="#campus-map"
     width="600"
     height="400">

<map name="campus-map">
  <area shape="rect" coords="50,50,200,150" href="#library" alt="Library">
  <area shape="rect" coords="250,50,400,150" href="#cafeteria" alt="Cafeteria">
  <area shape="rect" coords="450,50,550,150" href="#gym" alt="Gymnasium">
</map>

<figcaption>
  <strong>Campus Buildings:</strong>
  <ul>
    <li><a href="#library">Library</a></li>
    <li><a href="#cafeteria">Cafeteria</a></li>
    <li><a href="#gym">Gymnasium</a></li>
  </ul>
</figcaption>
</figure>

Modern Alternatives

When NOT to Use Image Maps

Alternative: CSS + HTML

<style>
.interactive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 600px;
}
.grid-item {
  aspect-ratio: 3/2;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.2s;
}
.grid-item:hover {
  transform: scale(1.05);
  background: #2563eb;
}
</style>

<div class="interactive-grid">
<a href="#region1" class="grid-item">Region 1</a>
<a href="#region2" class="grid-item">Region 2</a>
<a href="#region3" class="grid-item">Region 3</a>
<a href="#region4" class="grid-item">Region 4</a>
</div>

<p>Modern, responsive, touch-friendly alternative</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.interactive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 600px;
}
.grid-item {
  aspect-ratio: 3/2;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.2s;
}
.grid-item:hover {
  transform: scale(1.05);
  background: #2563eb;
}
</style>

<div class="interactive-grid">
<a href="#region1" class="grid-item">Region 1</a>
<a href="#region2" class="grid-item">Region 2</a>
<a href="#region3" class="grid-item">Region 3</a>
<a href="#region4" class="grid-item">Region 4</a>
</div>

<p>Modern, responsive, touch-friendly alternative</p>

Alternative: SVG

<svg viewBox="0 0 600 400" style="max-width: 600px; border: 2px solid #3b82f6;">
<!-- Rectangle regions as clickable SVG elements -->
<a href="#region1">
  <rect x="0" y="0" width="300" height="200" fill="#3b82f6" opacity="0.3">
    <title>Region 1</title>
  </rect>
</a>

<a href="#region2">
  <rect x="300" y="0" width="300" height="200" fill="#ec4899" opacity="0.3">
    <title>Region 2</title>
  </rect>
</a>

<a href="#region3">
  <circle cx="150" cy="300" r="80" fill="#10b981" opacity="0.3">
    <title>Region 3</title>
  </circle>
</a>

<a href="#region4">
  <circle cx="450" cy="300" r="80" fill="#f59e0b" opacity="0.3">
    <title>Region 4</title>
  </circle>
</a>

<!-- Labels -->
<text x="150" y="100" text-anchor="middle" font-size="20" fill="#1e40af">Region 1</text>
<text x="450" y="100" text-anchor="middle" font-size="20" fill="#9f1239">Region 2</text>
<text x="150" y="305" text-anchor="middle" font-size="20" fill="#065f46">Region 3</text>
<text x="450" y="305" text-anchor="middle" font-size="20" fill="#92400e">Region 4</text>
</svg>

<p>SVG is responsive and scales perfectly</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<svg viewBox="0 0 600 400" style="max-width: 600px; border: 2px solid #3b82f6;">
<!-- Rectangle regions as clickable SVG elements -->
<a href="#region1">
  <rect x="0" y="0" width="300" height="200" fill="#3b82f6" opacity="0.3">
    <title>Region 1</title>
  </rect>
</a>

<a href="#region2">
  <rect x="300" y="0" width="300" height="200" fill="#ec4899" opacity="0.3">
    <title>Region 2</title>
  </rect>
</a>

<a href="#region3">
  <circle cx="150" cy="300" r="80" fill="#10b981" opacity="0.3">
    <title>Region 3</title>
  </circle>
</a>

<a href="#region4">
  <circle cx="450" cy="300" r="80" fill="#f59e0b" opacity="0.3">
    <title>Region 4</title>
  </circle>
</a>

<!-- Labels -->
<text x="150" y="100" text-anchor="middle" font-size="20" fill="#1e40af">Region 1</text>
<text x="450" y="100" text-anchor="middle" font-size="20" fill="#9f1239">Region 2</text>
<text x="150" y="305" text-anchor="middle" font-size="20" fill="#065f46">Region 3</text>
<text x="450" y="305" text-anchor="middle" font-size="20" fill="#92400e">Region 4</text>
</svg>

<p>SVG is responsive and scales perfectly</p>

Tools for Creating Image Maps

Online Generators

Image Map Generator - Visual coordinate picker
ImageMapster - jQuery plugin
HTML-Kit Image Mapper

Manual Calculation

// Get coordinates from image editor (Photoshop, GIMP, etc.)
// Or use browser DevTools to find pixel positions

Browser Support

Feature	Chrome	Firefox	Safari	Edge
`<map>` element	1+	1+	1+	12+
`name` attribute	1+	1+	1+	12+
Rectangle shapes	1+	1+	1+	12+
Circle shapes	1+	1+	1+	12+
Polygon shapes	1+	1+	1+	12+

Best Practices

Provide alt text for every <area> element
Include text alternative for the entire map
Keep regions large enough for touch targets (44x44px minimum)
Test keyboard navigation with Tab and Enter
Consider responsive alternatives like CSS Grid or SVG
Use title attributes for hover tooltips
Document coordinates for future maintenance

<!-- Coordinates don't scale on resize -->
<img src="image.jpg" usemap="#map" style="width: 100%;">

<!-- Small touch targets -->
<area shape="rect" coords="10,10,20,20" href="#link" alt="Tiny">

<!-- Missing alt text -->
<area shape="rect" coords="0,0,100,100" href="#link">

<!-- Wrong coordinate order -->
<area shape="rect" coords="200,200,10,10" href="#link" alt="Wrong">

<!-- Fixed dimensions -->
<img src="image.jpg" usemap="#map" width="600" height="400">

<!-- Adequate touch targets -->
<area shape="rect" coords="10,10,60,60" href="#link" alt="Good size">

<!-- Alt text included -->
<area shape="rect" coords="0,0,100,100" href="#link" alt="Description">

<!-- Correct coordinates (x1,y1,x2,y2) -->
<area shape="rect" coords="10,10,200,200" href="#link" alt="Correct">

Defines clickable regions within a map. Learn more →

Image element that references the map. Learn more →

<map> - The Image Map Element

The `<map>` Element

Quick Example

Syntax

Essential Attributes

name (Required)

Connecting Images to Maps

usemap Attribute

Multiple Images, Same Map

Creating Clickable Regions

Shape Types

Rectangle (rect)

Circle (circle)

Polygon (poly)

Default (entire image)

Practical Examples

Website Navigation

Floor Plan

Product Features

Infographic Navigation

Accessibility

Alt Text is Required

Keyboard Navigation

Provide Text Alternative

Modern Alternatives

When NOT to Use Image Maps

Alternative: CSS + HTML

Alternative: SVG

Tools for Creating Image Maps

Online Generators

Manual Calculation

Browser Support

Best Practices

Common Issues

Specifications

<map> - The Image Map Element

The <map> Element

Quick Example

Syntax

Essential Attributes

name (Required)

Connecting Images to Maps

usemap Attribute

Multiple Images, Same Map

Creating Clickable Regions

Shape Types

Rectangle (rect)

Circle (circle)

Polygon (poly)

Default (entire image)

Practical Examples

Website Navigation

Floor Plan

Product Features

Infographic Navigation

Accessibility

Alt Text is Required

Keyboard Navigation

Provide Text Alternative

Modern Alternatives

When NOT to Use Image Maps

Alternative: CSS + HTML

Alternative: SVG

Tools for Creating Image Maps

Online Generators

Manual Calculation

Browser Support

Best Practices

Common Issues

Related Elements

Specifications

The `<map>` Element