By the end of this tutorial, you’ll confidently build clickable image maps with semantic HTML in real-world projects.
Connect <img usemap>, <map>, and <area> hotspots.
Define regions with rect, circle, poly, and default.
Use href, target, rel, and alt on hotspots.
Find and set accurate pixel coords for each shape type.
Provide alt labels and text-link alternatives for every region.
Know when to use SVG instead of raster image maps.
<area> Tag?The area element (<area>) is used with the <map> element to define clickable regions (hotspots) within an image. When a user clicks a hotspot, the browser navigates to the linked URL or runs a script.
The <area> tag has no closing tag and no content—all configuration is done through attributes. Link the map to an image with usemap="#map-name" on the <img> element.
Each <area> defines one hotspot. The parent <map> container holds all areas, and the image’s usemap attribute must match the map’s name (prefixed with #).
<map> ElementThe <map> element is the container for all hotspots. It has a name attribute that must match the usemap value on the image (prefixed with #). Each child <area> defines one clickable region.
usemap="#name"Associates the raster image with the map.
name="name"Container holding one or more area elements.
shape + coordsOne hotspot per element; void tag, no closing tag.
Map can follow the img; order does not affect behavior.
<img src="/images/area-example.png" alt="Site navigation diagram" usemap="#site-map" width="256" height="256">
<map name="site-map">
<area shape="rect" coords="253,98,111,1" href="/html/tags/a" alt="HTML anchor tag tutorial">
<area shape="rect" coords="253,250,74,148" href="https://codetofun.com/css" alt="CSS tutorials">
</map>Place <area> elements inside a <map>, then link the map to an image with usemap:
<img src="your-image.jpg" alt="Your Image" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="0,0,50,50" href="page1.html" alt="Area 1">
<area shape="circle" coords="100,100,50" href="page2.html" alt="Area 2">
</map>usemap value must match the map element’s name, prefixed with #.<area> is a void element—no closing tag and no inner content.href for non-navigating hotspots, or use onclick for custom behavior.| Attribute | Values | Purpose |
|---|---|---|
shape | rect · circle · poly · default | Geometry of the hotspot region |
coords | Pixel values | Coordinate pairs matching the chosen shape |
href | URL | Destination when the hotspot is clicked |
alt | Text | Accessible label (required when href is set) |
target | _blank, _self, etc. | Where to open the linked page |
rel | noopener noreferrer | Link relationship; use with target="_blank" |
hreflang | Language code | Language of the linked document |
referrerpolicy | no-referrer, etc. | Controls Referer header on navigation |
The coords attribute format depends on shape:
| Shape | coords Format | Description |
|---|---|---|
rect | x1,y1,x2,y2 | Top-left corner, then bottom-right corner |
circle | x,y,r | Center x, center y, then radius in pixels |
poly | x1,y1,x2,y2,... | Pairs of x,y points defining a polygon (3+ vertices) |
default | No coords needed | Covers the whole image minus other defined areas |
The <area> tag supports attributes to specify the shape, coordinates, and behavior of each hotspot:
shape GeometryRegion geometry: rect, circle, poly, or default. Defaults to rect if omitted.
shape="circle"coords RequiredPixel coordinates matching the chosen shape. Must align with the image’s width and height.
coords="64,64,60"href NavigationURL to navigate to when the hotspot is clicked. Omit for non-navigating regions.
href="/html/tags/a"alt Required*Accessible label for the region. Required when href is set so screen readers can describe each hotspot.
alt="CSS tutorials"target / rel LinksSame as <a> tags. Use target="_blank" with rel="noopener noreferrer".
target="_blank" rel="noopener noreferrer"download / hreflang OptionalPrompt download for same-origin files, or hint the language of the destination document.
hreflang="en"* alt is required when href is present. The obsolete HTML4 nohref attribute is no longer needed—simply omit href instead.
Seven real-world image map patterns with copy-ready code, live previews, and hands-on practice. Click the regions in each output to test hotspots.
This image map has two rectangular hotspots. Click the HTML or CSS labeled region:
shape="rect"coords="253,98,111,1" — top-left to bottom-right
shape="rect"coords="253,250,74,148" — second hotspot
A single rectangular <area> inside a <map>, linked to an image via usemap.
<area shape="rect" coords="126,0,3,126" href="/js/interview" alt="Learn JavaScript">Developers use <area> to create interactive image maps for navigation, diagrams, and product showcases.
Create interactive image maps for navigation, providing users with clickable regions that link to different sections or pages.
<img src="/images/area-example.png" alt="HTML and CSS navigation map" usemap="#image-map" width="256" height="256">
<map name="image-map">
<area shape="rect" coords="253,98,111,1" href="https://codetofun.com/css" target="_blank" rel="noopener noreferrer" alt="Learn CSS">
<area shape="rect" coords="253,250,74,148" href="/html/tags/a" alt="Learn HTML">
</map>Enhance user experience by letting users click specific parts of an image to view detailed information or pop-ups using JavaScript onclick handlers.
<map name="product-map">
<area shape="rect" coords="253,98,111,1" alt="Learn CSS" onclick="alert('You clicked Learn CSS!'); return false;">
<area shape="rect" coords="253,250,74,148" alt="Learn HTML" onclick="alert('You clicked Learn HTML!'); return false;">
</map>Use shape="circle" for round clickable regions. Coordinates are center-x, center-y, radius in pixels. Ideal for logos, buttons, and circular UI elements on a diagram.
<area shape="circle" coords="64,64,60" href="/js/interview" alt="JavaScript — circular hotspot">Use shape="poly" for irregular regions defined by three or more coordinate pairs. Each pair is a vertex of the polygon—perfect for triangular slices, map outlines, or non-rectangular UI zones.
<area shape="poly" coords="50,50,200,50,125,200" href="/html/tags/a" alt="HTML Tags — triangular region">Image map links support the same navigation attributes as <a> tags. Use target="_blank" to open external destinations in a new tab, and always pair it with rel="noopener noreferrer" for security.
<area shape="rect" coords="253,98,111,1" href="https://codetofun.com" target="_blank" rel="noopener noreferrer" alt="Visit CodeToFun — opens in new tab">A production-ready image map combines the <img>, <map>, and multiple <area> elements with explicit width and height so coordinates stay accurate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Navigation Map</title>
</head>
<body>
<h1>Choose a Topic</h1>
<img src="/images/area-example.png" alt="Site navigation diagram" usemap="#site-map" width="256" height="256">
<map name="site-map">
<area shape="rect" coords="253,98,111,1" href="https://codetofun.com/css" alt="CSS tutorials">
<area shape="rect" coords="253,250,74,148" href="/html/tags/a" alt="HTML anchor tag tutorial">
<area shape="default" href="/html/tags/area" alt="Image map tutorial">
</map>
<nav aria-label="Text alternative">
<ul>
<li><a href="https://codetofun.com/css">CSS tutorials</a></li>
<li><a href="/html/tags/a">HTML anchor tag</a></li>
</ul>
</nav>
</body>
</html>Image map coordinates are pixel positions relative to the top-left corner of the image. They must match the width and height on your <img> (e.g. our area-example.png is 256×256).
Add width and height on the <img> matching the image’s natural pixel size.
Online image-map generators export coords; GIMP and Photoshop show cursor position in pixels.
Click each hotspot and tweak coords until regions align. Confirm rendered dimensions in DevTools.
| Shape | Format | Example |
|---|---|---|
| Rectangle | x1,y1,x2,y2 — top-left, then bottom-right | 253,98,111,1 |
| Circle | cx,cy,r — center point, then radius | 64,64,60 |
| Polygon | x1,y1,x2,y2,... — at least 3 vertex pairs | 50,50,200,50,125,200 |
See Shape & Coordinates for full attribute details.
HTML image map coordinates are fixed in pixels and do not automatically scale when an image is resized with CSS. This is the biggest limitation of raster image maps.
width/height attributes on <img> and avoid CSS scalingmax-width: 100% only when width/height attrs scale proportionallyresize events for fluid layoutssrcset swaps won’t affect hotspot alignmentImage maps must be usable by keyboard and screen reader users. Follow these patterns:
alt — Describe the overall graphic on the <img> elementalt — Required on every linked <area>; describes what that region links to<img src="/images/area-example.png" alt="Diagram linking to CSS and HTML tutorials" usemap="#topics" width="256" height="256">
<map name="topics">
<area shape="rect" coords="253,98,111,1" href="https://codetofun.com/css" alt="CSS tutorials">
<area shape="rect" coords="253,250,74,148" href="/html/tags/a" alt="HTML anchor tag tutorial">
</map>
<nav aria-label="Topics (text alternative)">
<ul>
<li><a href="https://codetofun.com/css">CSS tutorials</a></li>
<li><a href="/html/tags/a">HTML anchor tag</a></li>
</ul>
</nav>Both technologies create clickable regions on graphics, but they suit different scenarios:
| Aspect | HTML <area> | SVG <a> + shapes |
|---|---|---|
| Best for | PNG/JPG photos, infographics, product images with a few hotspots | Scalable diagrams, maps, charts; CSS-stylable regions |
| Responsiveness | Fixed pixel coords; may misalign when scaled | Coords scale with the graphic natively |
| Browser support | Universal in all browsers | Universal in all modern browsers |
For vector-based interactive diagrams, see our SVG Links tutorial.
Site navigation diagrams, educational infographics, product feature callouts with a few hotspots.
Complex responsive UIs, frequently updated layouts, mobile-first designs with many regions.
Positioned <a> elements over an image with absolute positioning as an alternative.
Scalable, accessible, styleable interactive vector graphics for complex diagrams.
Create a <map name="..."> with one or more <area> children specifying shapes and coords.
Add usemap="#map-name" on the <img> to associate it with the map.
The browser detects which <area> coords contain the click and follows the href or runs the handler.
A single graphic becomes a navigation hub—ideal for diagrams, infographics, and visual site maps.
The <area> tag is supported in every major browser without polyfills.
From legacy Internet Explorer to the latest Chromium builds — image maps and the <area> element are universally supported.
Bottom line: Ship image maps with confidence. The <area> element is safe to use in every production environment today.
The <area> tag turns static images into interactive navigation hubs. Combine <map>, <area>, and usemap with descriptive alt text, fixed image dimensions, and text-link alternatives.
For responsive or complex interactive graphics, reach for SVG—but for raster diagrams and infographics, HTML image maps remain a simple, universally supported solution.
alt text on every <area> with an hrefwidth and height on the image to keep coords accuratetarget="_blank" with rel="noopener noreferrer" for external linkscoords values<map name> and <img usemap> values in syncalt on linked areas—screen readers need region labels<area> outside a <map> element<area>Bookmark these before you ship — they’ll make every image map clearer and more accessible.
<area> defines one clickable region. Must be inside <map>; image uses usemap="#name".
rect, circle, poly, and default define region geometry in pixel coordinates.
href sets the link destination; alt is required for accessibility when href is present.
Use target="_blank" with rel="noopener noreferrer" for external new-tab links.
Coords don’t scale with CSS. Use SVG or JavaScript for responsive interactive graphics.
ResponsiveSupported in every browser including IE. Always provide a text link list as an accessible alternative.
Compatibility<area> element defines clickable hotspots within an image map, used with <map> and <img usemap>.<map> is the container; each <area> inside it defines one clickable region on the linked image.shape sets the hotspot geometry: rect (rectangle), circle, poly (polygon), or default (remaining image area).href is present. The alt attribute describes the region for screen readers and when images fail to load.width/height attributes, recalculate with JavaScript, or use SVG for fluid layouts.target="_blank" and rel="noopener noreferrer" on the <area> element, just like on <a> tags.shape="default" covers the entire image minus regions defined by other <area> elements. Use it as a catch-all hotspot for unmapped parts of the graphic.Open the Try It editor and experiment with clickable image regions.
12 people found this page helpful