Image Maps in HTML

You’ve seen them before, maybe without realizing it. A world map where each country is clickable. A diagram of a car engine where each part takes you to a different page. A floor plan where every room links to a booking form. That’s all powered by image maps in HTML.

In plain terms, an image map lets you define multiple clickable areas directly on a single image. Instead of one big link that covers the whole image, you carve out specific regions, each going to its own destination.

This isn’t a new concept. Image maps actually go way back to the early days of the web. But they’re still useful today in the right situations, and knowing how they work will add a genuinely practical technique to your toolkit.

Let’s get into it properly.

---

01When Should You Actually Use an HTML Image Map?

Before writing a single line of code, ask yourself: do you actually need one?

HTML image maps shine in situations like:

• Geographic maps where regions are clickable (country maps, state maps, campus maps)
• Anatomical or technical diagrams where each part links somewhere
• Seating charts or floor plans
• Product images where specific components are interactive
• Infographics with multiple linked zones

If you just have a regular image you want to make clickable as a whole, don’t use an image map. Wrap your <img> tag in an <a> anchor tag, as covered in our tutorial on anchor tags in HTML. Image maps are specifically for situations where different parts of the same image need to do different things.

---

02The Two Elements Behind Image Maps in HTML

The whole system relies on two HTML elements working together: <map> and <area>. Here’s the big picture before we zoom in.

---

03The map Tag in HTML

The <map> tag is your container. It holds all the clickable area definitions for your image. On its own, it does absolutely nothing visually. Think of it like an invisible overlay waiting to be connected to an image.

The one attribute you must give it is name:

<map name="my-map">
  <!-- area elements will go in here -->
</map>

That name value is how your <img> tag will find and connect to this map. We’ll wire that up shortly.

---

04The area Tag in HTML

The <area> tag is where you actually define each clickable zone. It’s a void element (no closing tag), and it takes several attributes that you’ll want to know well.

---

05The Three Shape Types in Image Maps in HTML

This is where you need to pay attention because each shape has a different coordinate format. Get this right and the rest is straightforward.

1. Rectangle (shape=”rect”)

Defined by four coordinates: x1, y1, x2, y2, where (x1, y1) is the top-left corner and (x2, y2) is the bottom-right corner. All values are in pixels from the top-left of the image.

<area shape="rect" coords="60,50,300,160" href="/page" alt="My rectangular area">

2. Circle (shape=”circle”)

Defined by three values: cx, cy, r. That’s the center X coordinate, center Y coordinate, and the radius in pixels.

<area shape="circle" coords="200,110,70" href="/page" alt="My circular area">

3. Polygon (shape=”poly”)

This is the most flexible shape. You give it a list of x,y coordinate pairs that trace the outline of any irregular polygon. The browser automatically closes the shape by connecting the last point back to the first.

<area shape="poly" coords="200,30,330,120,280,200,120,200,70,120" href="/page" alt="Pentagon area">

The polygon shape is incredibly powerful. Think irregular country borders, product silhouettes, anything that isn’t a neat box or circle.

---

06Connecting the Image to the Map: The usemap Attribute

Here’s the piece that ties everything together. Your <img> tag gets a usemap attribute pointing to your map by name. The value must start with a #, exactly like a fragment identifier.

<img src="your-image.jpg" usemap="#my-map" alt="An image with clickable areas">

<map name="my-map">
  <area shape="rect" coords="..." href="..." alt="...">
</map>

The name in <map name="my-map"> matches the #my-map in usemap="#my-map". That’s the connection. Simple, but you have to get it exactly right, including the hash symbol.

---

07Building Your First Image Map in HTML

Let’s build a real working example. We’ll use a banner image and add three distinct clickable regions to it: one rectangle, one circle, and one polygon area.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Image Map</title>
</head>
<body>

  <img
    src="demo-map.png"
    usemap="#demo-map"
    alt="Demo image with clickable zones"
    width="800"
    height="400"
  >

  <map name="demo-map">

    <!-- Rectangle area: top-left section -->
    <area
      shape="rect"
      coords="0,0,260,400"
      href="https://daniyaldev.com/"
      alt="Go to homepage"
      title="Visit the homepage"
    >

    <!-- Circle area: center of image -->
    <area
      shape="circle"
      coords="400,200,80"
      href="https://daniyaldev.com/mastering-images-in-html5-basic-to-advanced/"
      alt="Learn about HTML images"
      title="Images in HTML5 tutorial"
    >

    <!-- Polygon area: right section (triangle) -->
    <area
      shape="poly"
      coords="540,0,800,0,800,400"
      href="https://daniyaldev.com/anchor-tags-in-html-absolute-relative-and-special-links/"
      alt="HTML anchor tags"
      title="Learn anchor tags"
    >

  </map>

</body>
</html>

Notice a few things here. Each <area> gets its own href and its own alt text. The coordinates are based on the actual displayed pixel size of the image. The <map> element can be placed anywhere in the document, not necessarily right next to the image.

---

08A Useful Trick: Finding Your Coordinates

Nobody manually calculates pixel coordinates by hand for complex shapes. Honestly, that would be painful. Here’s what developers actually do:

Open your image in our Advanced Image Map Generator Tool. It also shows you the pixel position of your cursor as you move it over the image. Even For complex polygons like country borders, our tool let you click directly on the image to drop points and export the coordinates automatically. That’s the practical way to handle this in real projects.

---

09A Practical Use Case: Clickable Product Diagram

Let’s look at a slightly more real-world example. Imagine you have a diagram of a camera and you want different parts to link to different pages. This is exactly where image maps in HTML are genuinely useful.

The code for this kind of setup looks like this:

<img
  src="camera-diagram.jpg"
  usemap="#camera-map"
  alt="Camera diagram with clickable parts"
  width="800"
  height="400"
>

<map name="camera-map">

  <!-- Lens area -->
  <area
    shape="circle"
    coords="200,200,90"
    href="/products/lens"
    alt="Camera lens - click to view lens details"
    title="View lens details"
  >

  <!-- Shutter button area -->
  <area
    shape="rect"
    coords="540,40,640,100"
    href="/products/shutter"
    alt="Shutter button - click to view shutter details"
    title="View shutter details"
  >

  <!-- Viewfinder area -->
  <area
    shape="rect"
    coords="540,120,720,220"
    href="/products/viewfinder"
    alt="Viewfinder - click to view viewfinder details"
    title="View viewfinder details"
  >

</map>

---

10Polygon Areas: Tracing Any Shape You Want

Let’s spend a little more time on polygons because they’re the most powerful and also the most confusing at first.

The coords value for a polygon is just a flat list of x,y pairs separated by commas: x1,y1,x2,y2,x3,y3,.... The browser connects the dots in order and closes the path automatically.

Here’s a triangle as a simple polygon:

<!-- A triangle in the top-right corner -->
<area
  shape="poly"
  coords="400,0, 800,0, 800,400"
  href="/right-section"
  alt="Right triangle section"
>

For a more complex shape like a country on a map, you might have 30 or 40 coordinate pairs. That’s totally valid. The longer the list, the more precisely it traces the boundary.

A quick tip: if you have very complex polygons (like a real geographic border), simplify the coordinates a little. You don’t need millimeter precision. A simplified polygon with 20 points is far easier to maintain than one with 200 points and looks basically identical to the user.

---

11Accessibility in HTML Image Maps

This is important and skipped too often. Image maps in HTML are interactive elements, which means accessibility isn’t optional here.

Here’s what you need to do:

1. Always include alt text on the img tag

As covered in depth in our guide on alt text for images in HTML, the alt attribute on the <img> tag describes the image itself for screen readers and for situations where the image fails to load. Don’t skip it.

2. Always include alt text on every area element

Every single <area> element with an href must have its own alt attribute describing what that specific area does. Screen readers announce the alt text of each area as a separate link.

<!-- Good: descriptive alt text on every area -->
<map name="regions-map">
  <area
    shape="poly"
    coords="..."
    href="/north-america"
    alt="North America - click to explore"
  >
  <area
    shape="poly"
    coords="..."
    href="/europe"
    alt="Europe - click to explore"
  >
  <area
    shape="poly"
    coords="..."
    href="/asia"
    alt="Asia - click to explore"
  >
</map>

<!-- Also add tabindex if you want keyboard nav to work properly -->
<!-- Most browsers handle this automatically, but some don't -->

3. Add a title attribute for tooltip context

The title attribute shows a tooltip on hover and gives additional context to assistive technologies. It’s a small addition that genuinely helps.

4. Consider providing a text-based alternative

For complex image maps, like a geographic map, it’s considered best practice to also provide a text-based list of links somewhere on the page. This ensures users on older devices, screen readers, or browsers that don’t render images properly can still navigate the content.

---

12The Responsive Challenge with Image Maps in HTML

Here’s the part nobody enjoys. Image maps in HTML have a known limitation: the coordinates are fixed pixel values. When your image scales down on a mobile screen, the coordinates stay the same, which means the clickable areas no longer line up correctly with the visual content of the image.

This is a genuine pain point. Let’s look at your options.

Option 1: Fix the Image Size

The simplest approach: set a fixed width on the image so it never scales. Not ideal for responsive layouts, but fine for specific use cases where the image is always shown at the same size.

<!-- Image stays at 800px, coords stay accurate -->
<img
  src="my-map.jpg"
  usemap="#my-map"
  alt="Interactive map"
  style="width: 800px; max-width: 100%;"
>

Note: max-width: 100% with a fixed width is still a problem because once the viewport is narrower than 800px, the image scales but coords don’t.

Option 2: JavaScript-Based Scaling

A common JavaScript approach: detect the scale factor between the image’s natural size and its displayed size, then multiply all coordinates by that factor. Here’s a clean example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Image Map</title>
  <style>
    img { max-width: 100%; height: auto; display: block; }
  </style>
</head>
<body>

  <img
    id="resp-map-img"
    src="map-image.png"
    usemap="#resp-map"
    alt="Responsive image map demo"
  >

  <map name="resp-map" id="resp-map">
    <area
      id="area-1"
      shape="rect"
      data-coords="0,0,250,200"
      coords="0,0,250,200"
      href="#zone1"
      alt="Top left zone"
    >
    <area
      id="area-2"
      shape="circle"
      data-coords="400,200,80"
      coords="400,200,80"
      href="#zone2"
      alt="Center circle zone"
    >
  </map>

  <script>
    function scaleMapCoords() {
      const img = document.getElementById('resp-map-img');
      const map = document.getElementById('resp-map');

      // Natural size of image
      const naturalW = img.naturalWidth;
      const naturalH = img.naturalHeight;

      // Displayed size
      const displayW = img.offsetWidth;

      const scale = displayW / naturalW;

      map.querySelectorAll('area').forEach(area => {
        const original = area.getAttribute('data-coords').split(',').map(Number);
        const scaled = original.map((val, i) => Math.round(val * scale));
        area.setAttribute('coords', scaled.join(','));
      });
    }

    // Run on load and on resize
    window.addEventListener('load', scaleMapCoords);
    window.addEventListener('resize', scaleMapCoords);
  </script>

</body>
</html>

The key here is storing the original coordinates in a data-coords attribute as the source of truth, then recalculating on load and on every resize. This keeps things accurate on any screen size.

Option 3: SVG as a Modern Alternative

If responsiveness is really critical for your project, you might consider replacing the image map with an inline SVG. SVG scales naturally with the viewport and supports clickable regions natively without coordinate math. It’s more code upfront but eliminates the responsive headache entirely.

For most standard cases though, the JavaScript scaling approach above works very well.

---

13Practical Use Cases for HTML Image Maps

Let’s talk about where image maps in HTML are genuinely the right tool.

---

14What the Full Code Looks Like: A Geographic Map Example

Let’s put everything together in one solid, real-world example. Here’s a simplified continent map using image maps in HTML, complete with accessibility attributes, titles, and proper structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive World Regions Map</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #141d34;
      color: #fff;
      padding: 2rem;
    }
    .map-wrapper {
      max-width: 800px;
      margin: 0 auto;
    }
    .map-wrapper img {
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
    }
    /* Text fallback list for accessibility */
    .map-text-nav {
      margin-top: 1.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .map-text-nav a {
      background: rgba(99,102,241,0.15);
      border: 1px solid rgba(99,102,241,0.3);
      color: #6366f1;
      text-decoration: none;
      padding: 0.4rem 1rem;
      border-radius: 999px;
      font-size: 0.85rem;
      transition: background 0.2s;
    }
    .map-text-nav a:hover {
      background: rgba(99,102,241,0.28);
    }
  </style>
</head>
<body>

  <div class="map-wrapper">

    <h1>Explore World Regions</h1>
    <p>Click on any region to learn more.</p>

    <img
      src="world-map.jpg"
      usemap="#world-map"
      alt="World map showing clickable continents and regions"
      width="800"
      height="450"
    >

    <map name="world-map">

      <area
        shape="poly"
        coords="80,80,200,60,210,140,160,180,70,170"
        href="/regions/north-america"
        alt="North America region"
        title="Explore North America"
      >

      <area
        shape="poly"
        coords="140,200,180,190,190,280,130,290,110,250"
        href="/regions/south-america"
        alt="South America region"
        title="Explore South America"
      >

      <area
        shape="poly"
        coords="290,60,400,50,420,150,360,180,270,160"
        href="/regions/europe"
        alt="Europe region"
        title="Explore Europe"
      >

      <area
        shape="poly"
        coords="290,180,420,160,450,310,340,320,270,280"
        href="/regions/africa"
        alt="Africa region"
        title="Explore Africa"
      >

      <area
        shape="poly"
        coords="420,50,640,40,660,200,480,210,410,160"
        href="/regions/asia"
        alt="Asia region"
        title="Explore Asia"
      >

      <area
        shape="circle"
        coords="600,330,50"
        href="/regions/oceania"
        alt="Oceania region"
        title="Explore Oceania"
      >

    </map>

    <!-- Text fallback for accessibility -->
    <nav class="map-text-nav" aria-label="Region links">
      <a href="/regions/north-america">North America</a>
      <a href="/regions/south-america">South America</a>
      <a href="/regions/europe">Europe</a>
      <a href="/regions/africa">Africa</a>
      <a href="/regions/asia">Asia</a>
      <a href="/regions/oceania">Oceania</a>
    </nav>

  </div>

</body>
</html>

This is a solid production pattern. The image map handles the visual interactivity, and the text nav list below it ensures every user, whether they use a mouse, keyboard, or screen reader, can access all the links.

---

15Common Mistakes to Avoid

Let’s be honest, image maps in HTML trip up beginners in a few predictable ways. Here are the ones worth knowing before you hit them yourself.

---

16Quick Reference: Image Maps in HTML Cheat Sheet

---

17How Image Maps Fit Into the Bigger Picture

You now have a solid understanding of image maps in HTML. But like any tool, they work best when you understand what surrounds them.

If you haven’t yet dug into how images work in HTML broadly, our tutorial on images in HTML5 is a great foundation, covering everything from the img tag attributes to image optimization. And for getting images to load smartly across different screen sizes, the responsive images with srcset and sizes article and the picture tag in HTML guide take things further.

Image maps in HTML are a specific, purposeful feature. They’re not something you’ll use on every project, but when a geographic map, product diagram, or interactive layout calls for it, they’re exactly the right tool and now you know how to use them properly.

Start with a simple rectangle on a test image. Get the coordinate system in your head. Then move to circles and polygons. Once that clicks you, you’ll have no trouble building complex interactive image maps from scratch. Must check out our Free Image Map Generator Tool, it is a great shortcut for map and area tags in HTML with accurate results and work totally in your browser.