HTML usemap Attribute

Introduction

The usemap attribute is a powerful HTML feature for creating client-side image maps. It connects an image (or object) to a <map> element so you can define clickable regions — each linking to a different URL.

Image maps are useful for diagrams, floor plans, infographics, and navigation graphics where different parts of one image should go to different pages. Each hotspot is an <area> inside the map.

What You’ll Learn

Purpose of usemap

The primary purpose of the usemap attribute is to connect an image with a client-side image map. It is applied to <img> (most common) or <object> and references a corresponding <map> element where clickable <area> regions are defined.

Without usemap, the image is a single link at most. With it, you can turn one graphic into a multi-link navigation surface.

📝 Syntax

Set usemap on the image and define matching name on <map>:

<img src="diagram.png" alt="Site map" usemap="#siteMap">

<map name="siteMap">
  <area shape="rect" coords="0,0,100,80" href="/home" alt="Home section">
</map>

Syntax Rules

• Value format: #mapName — hash plus the name on <map>.
• The map can appear before or after the image in the document.
• Each <area> needs shape, coords, and usually href + alt.
• Coordinates are in pixels relative to the image’s intrinsic (natural) size.
• JavaScript property: HTMLImageElement.useMap (same hash string).
• Responsive images: coords do not auto-scale; recalculate or prefer SVG links for complex responsive layouts.

💎 Values

The usemap attribute accepts a hash-name reference pointing to a <map> element:

• #mapName — Must match name="mapName" on the <map> element.
• The hash (#) is required in the attribute value.
• Case sensitivity follows document rules; use consistent naming (e.g. worldMap).

<img src="example.jpg" alt="Example Image" usemap="#exampleMap">
<map name="exampleMap">
  <!-- area elements defined here -->
</map>

How It Works

In this pattern, usemap="#exampleMap" tells the browser to use the map named exampleMap. Clicks inside defined <area> regions follow each area’s href.

Applicable Elements

Image map vs single link vs SVG

Examples Gallery

Build a three-zone image map, switch maps with JavaScript, and use rect, circle, and polygon shapes.

👀 Live Preview

Minimal image map linking two rectangular regions on one image:

Example

A world-map style layout with two rectangular regions (extend with more <area> elements as needed):

usemap.html

Copy

<img src="world-map.jpg" alt="World Map" usemap="#worldMap">
<map name="worldMap">
  <area shape="rect" coords="0,0,100,100" href="north-america.html" alt="North America">
  <area shape="rect" coords="100,0,200,100" href="europe.html" alt="Europe">
</map>

Try It Yourself

How It Works

usemap="#worldMap" connects the image to the map named worldMap. Each <area> defines a rectangle with coords as left,top,right,bottom in pixels.

Dynamic Values with JavaScript

Switch which map is active when the user clicks a button:

dynamic-usemap.html

Copy

<button type="button" onclick="updateMap()">Change Map</button>
<img id="dynamicImage" src="diagram.png" alt="Dynamic Map" usemap="#defaultMap">

<map name="defaultMap">...</map>
<map name="dynamicMap">...</map>

<script>
  function updateMap() {
    document.getElementById("dynamicImage").useMap = "#dynamicMap";
  }
</script>

Try It Yourself

How It Works

Clicking Change Map runs updateMap(), which sets useMap to #dynamicMap. The same image now uses different hotspot definitions without changing src.

Example — circle and polygon areas

Not every hotspot is a rectangle. Use circle and poly for other shapes:

shapes.html

Copy

<map name="shape-map">
  <area shape="circle" coords="80,80,50" href="/circle" alt="Circle zone">
  <area shape="poly" coords="200,30,260,130,140,130" href="/triangle" alt="Triangle zone">
</map>

Try It Yourself

How It Works

Circle coords are center X, center Y, radius. Polygon coords are comma-separated x,y pairs for each vertex. Always match coords to the image’s natural dimensions.

♿ Accessibility

• alt on every <area> — Describes each hotspot for screen readers (required for meaningful maps).
• Descriptive alt on the image — Summarize the whole graphic, not just “image map.”
• Provide a text alternative — List links below the image for keyboard-only users when hotspots are hard to discover.
• Keyboard focus — Image map areas are focusable in many browsers; ensure visible focus styles.
• Consider SVG for complex UIs — Scalable vector maps with semantic links can be easier to maintain accessibly.

💡 Best Practices

• Ensure the referenced <map> contains <area> elements with correct coordinates and destination links.
• Test image maps thoroughly on different browsers for consistent behavior.
• Consider accessibility by providing alternative text for each clickable area.

🎉 Conclusion

The usemap attribute is a valuable tool for creating interactive image maps, allowing you to define multiple clickable areas within a single image. Used with <map> and <area>, it enhances navigability for diagrams and visual layouts.

Understanding static markup and dynamic updates with JavaScript helps you build engaging pages while keeping hotspots accessible and well labeled.