HTML Image Maps & Object Element

Create clickable regions on images using <map> and <area> elements, and embed non-HTML content using the <object> element.

Overview

HTML image maps allow different regions of a single image to be clickable hyperlinks. Using the `<map>` element with nested `<area>` elements, you can define rectangular, circular, or polygonal clickable zones on an image useful for interactive diagrams, geographic maps, org charts, and seating plans. The `<img usemap="#mapname">` attribute connects an image to its map. Each `<area>` element specifies a shape (`rect`, `circle`, `poly`), coordinates, and an `href` (or `onclick`). Areas that are not links use the `nohref` attribute. The `<object>` element is the HTML way to embed external resources PDFs, SVGs, videos, or legacy Flash content. It is more semantic than `<iframe>` for non-web resources and supports fallback content between its opening and closing tags.

Key Points

•`<img usemap="#id">` connects an image to a `<map id="id">` element
•`<area shape="rect" coords="x1,y1,x2,y2" href="/page">` rectangular clickable region
•`<area shape="circle" coords="cx,cy,radius" href="/page">` circular region
•`<area shape="poly" coords="x1,y1,x2,y2,..." href="/page">` polygon (any shape)
•`<area alt="">` is required for accessibility describe the link destination
•Image maps are NOT responsive by default use JavaScript to rescale coordinates for fluid images
•`<object data="/doc.pdf" type="application/pdf">` embeds a PDF with fallback content

Examples

Interactive image map with rect, circle, and poly areas

<!-- Connect image to its map via usemap="#mapname" -->
<img
  src="/images/world-map.png"
  alt="World map"
  usemap="#world"
  width="800"
  height="400"
>

<map name="world">
  <!-- Rectangular region -->
  <area
    shape="rect"
    coords="50,80,200,180"
    href="/regions/north-america"
    alt="North America"
    title="North America"
  >

  <!-- Circular region -->
  <area
    shape="circle"
    coords="580,120,40"
    href="/regions/europe"
    alt="Europe"
    title="Europe"
  >

  <!-- Polygonal region (irregular shape) -->
  <area
    shape="poly"
    coords="620,200,700,150,780,200,740,280,660,280"
    href="/regions/asia"
    alt="Asia"
    title="Asia"
  >

  <!-- No href = no link (just descriptive region) -->
  <area
    shape="rect"
    coords="0,0,50,400"
    alt="Ocean"
  >
</map>

Coordinates are in CSS pixels relative to the image's natural width/height (not displayed size).

Responsive image map using JavaScript to rescale coordinates

<img
  id="map-img"
  src="/images/floor-plan.png"
  alt="Office floor plan"
  usemap="#floor"
  style="width: 100%; max-width: 800px; height: auto;"
>

<map name="floor" id="floor">
  <area id="conf-room" shape="rect" coords="100,80,250,160" href="/rooms/conference" alt="Conference Room">
  <area id="kitchen" shape="rect" coords="300,200,420,280" href="/rooms/kitchen" alt="Kitchen">
</map>

<script>
// Rescale image map coordinates when the image resizes
const img = document.getElementById('map-img');
const originalWidth = 800; // natural image width

// Store original coordinates
const areas = [...document.querySelectorAll('#floor area')];
const origCoords = areas.map(a => a.coords.split(',').map(Number));

function rescaleMap() {
  const scale = img.offsetWidth / originalWidth;
  areas.forEach((area, i) => {
    area.coords = origCoords[i].map(c => Math.round(c * scale)).join(',');
  });
}

window.addEventListener('resize', rescaleMap);
new ResizeObserver(rescaleMap).observe(img);
rescaleMap();
</script>

Without rescaling, the map areas stay at original pixel positions while the image resizes clicks miss.

The <object> element for embedding PDFs and SVGs

<!-- Embed a PDF with fallback content -->
<object
  data="/documents/annual-report.pdf"
  type="application/pdf"
  width="100%"
  height="600"
  aria-label="Annual Report 2024 PDF"
>
  <!-- Fallback content shown if browser can't display the PDF -->
  <p>
    Your browser cannot display PDFs inline.
    <a href="/documents/annual-report.pdf" download>Download the Annual Report</a>
  </p>
</object>

<!-- Embed an SVG with fallback -->
<object
  data="/images/logo.svg"
  type="image/svg+xml"
  width="200"
  height="100"
  aria-label="Company logo"
>
  <!-- Fallback: raster image -->
  <img src="/images/logo.png" alt="Company logo" width="200" height="100">
</object>

The fallback content between <object> tags shows if the browser cannot render the specified type.

Common Mistakes

Forgetting `alt` attribute on `<area>` elements each area needs a description for screen readers and keyboard navigation
Not rescaling coordinates when images are displayed at different sizes than their natural dimensions
Using `<object>` for embedding other HTML pages use `<iframe>` for HTML, `<object>` is for non-HTML content types

Note

For building image maps, use a free tool like image-map.net to visually draw regions and export the coordinates HTML manually calculating polygon coordinates is tedious and error-prone.

HTML Image Maps & Object Element

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

How do you connect an <img> element to a <map> element?