What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To make different parts of one picture link to different pages, pair an <img> element with a client-side <map> and one or more <area> elements. Give the image a usemap value that matches the map’s name, define each clickable region with coordinates in the image’s original pixel system, and provide accessible text alternatives. The basic pattern works well when the image’s geometry matters, but fixed coordinates can stop lining up when a responsive image changes size.
Build a basic HTML image map
An image map attaches multiple clickable hotspots to one image. The image remains a single file; each <area> defines a region and its destination. This is a client-side map, processed by the browser. W3C recommends client-side maps over server-side image maps because server-side maps require a specific input device (W3C HTML Techniques for WCAG 1.0).
Here is a complete page you can save as image-map.html. Put campus.jpg beside it, then change the file name, coordinates, descriptions, and destination URLs to match your image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Campus locations</title>
</head>
<body>
<h1>Explore the campus</h1>
<p>Select a building on the map, or use the links below it.</p>
<img src="campus.jpg"
alt="Campus map showing the library, science hall, and student center"
usemap="#campus-map">
<map name="campus-map" id="campus-map">
<area shape="rect" coords="40,30,180,120"
href="library.html" alt="Library">
<area shape="circle" coords="280,95,45"
href="science-hall.html" alt="Science Hall">
<area shape="poly" coords="350,40,430,55,410,135,335,120"
href="student-center.html" alt="Student Center">
</map>
<ul>
<li><a href="library.html">Visit the library</a></li>
<li><a href="science-hall.html">Visit Science Hall</a></li>
<li><a href="student-center.html">Visit the student center</a></li>
</ul>
</body>
</html>The fragment in usemap="#campus-map" points to the map named campus-map. The name must match exactly, including capitalization, and should be unique in the document. The map is often placed next to its image in the markup so the relationship is easy to find and maintain. See MDN’s documentation for the <map> element and <area> element.
#1 Best Overall
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Choose the shape and measure its coordinates
Coordinates are measured from the top-left corner of the image, in its intrinsic pixel coordinate system: the image’s own dimensions, not necessarily the size at which CSS displays it. Count or measure the region in an image editor, using the original image dimensions as your reference. MDN documents the coordinate formats and shapes in its area reference.
| Shape | Coordinate format | Example | Good fit |
|---|---|---|---|
rect |
Left, top, right, bottom | 40,30,180,120 |
A rectangular region such as a room or button |
circle |
Center x, center y, radius | 280,95,45 |
A round region such as a circular marker |
poly |
Successive x,y pairs around the boundary | 350,40,430,55,410,135,335,120 |
An irregular outline, such as a building footprint |
For a polygon, trace points around the outline in order. The browser can close the polygon automatically, so you do not have to repeat the first coordinate pair at the end. Keep the point count practical: extra points make an area harder to edit without necessarily making the clickable boundary more useful.
Every linked <area> should have an href and an alt. The destination can be a page, a section fragment, or another URL appropriate to the task. The shape and coordinates determine where the hotspot is; the alternative text identifies its link purpose. If a region has no useful destination, do not create a misleading clickable area for it.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Make the map accessible
An image map needs text alternatives at two levels. W3C explains that the image alternative conveys the image’s informative context, while each area alternative conveys its destination or action (W3C WAI: Image Maps). The image’s alt should summarize relevant context, not enumerate every hotspot in place of the area labels.
Recommended Free Tools
- Informative image: Describe what the picture communicates, such as “Campus map showing the library, science hall, and student center.”
- Decorative image: Use
alt=""if the image itself adds no information and the linked areas provide the useful labels. - Each linked area: Use concise, meaningful alternative text such as
alt="Library", or name the action where the destination alone would be unclear. - Visible fallback: Provide ordinary text links for the same destinations, as in the example. This makes the choices available without relying on interpreting the picture, including in text-only contexts and for users who prefer direct links.
Test keyboard access by tabbing through the page and activating each destination. Confirm that the focus order makes sense and that the visible link list remains usable without a mouse or touch. W3C’s image-map guidance discusses alternatives and client-side maps in more detail at WAI Image Maps.
Keep hotspots aligned on responsive pages
A map’s coordinates do not automatically change just because CSS scales its image. If an image is shown at a different size, the same fixed coordinates can point at the wrong places or miss the regions entirely. MDN notes this responsive-width limitation, and W3C warns that hotspots may fail on mobile when their coordinates are not scaled in the same proportions as the image (MDN: Add a hitmap on top of an image; W3C WAI: Image Maps).
Option 1: Keep a fixed display size
If the layout allows it, show the image at the same dimensions used to measure its coordinates. This is the simplest way to avoid coordinate drift. If the page must scale the image down, check the map at every actual CSS size used in the design rather than assuming the hotspots will follow it.
Option 2: Scale coordinates with the image
A responsive image map needs its coordinates adjusted in proportion to the displayed image. One approach is to store the original coordinates and update the coords values when the image resizes. For example, if the image is uniformly scaled from an original width of 500 pixels to 250 pixels, multiply every x, y, and radius value by 0.5. Preserve the image’s aspect ratio; a circle cannot be represented accurately by one radius if the image is stretched by different horizontal and vertical amounts. Test the result after resizing and after the image finishes loading.
Option 3: Use a responsive overlay
When hotspots must stay aligned in a fluid layout, a responsive SVG overlay or positioned links layered over the image may be easier to manage. These patterns let you size the visual layer with the image, but still require careful labels, keyboard interaction, and testing. MDN’s guide to adding a hitmap on top of an image discusses alternatives for responsive layouts.
Whichever approach you choose, test the smallest and largest supported widths, intermediate widths, and touch input on an actual mobile layout. Also test zoom and orientation changes if they are relevant to your page. Keep the ordinary text links available: they remain useful if a visual hotspot is difficult to target or an image-map implementation fails at a particular size.
When a list of links is the better choice
Use an image map when the visual location is central to the task—for example, choosing a room on a floor plan or an identified part of a diagram. If users are simply choosing among destinations, a semantic list of links is usually simpler to maintain and easier to understand without the image. MDN describes ordinary links as lighter to maintain and often more SEO-friendly, with better support for screen readers, text-only browsers, and translation services (MDN: Add a hitmap on top of an image).
- Choose an image map when the area’s position or shape carries meaning that a list alone would lose.
- Choose ordinary links when the picture is only decoration or when each destination can be presented clearly as text.
- For either pattern, use descriptive link text and ensure users can reach the destinations without precise pointer control.
Test and troubleshoot the finished map
Check the implementation in the browser at the sizes and input methods your site supports. Click the center and edges of every region, tab through the areas and fallback links, and confirm the resulting pages or actions. If a hotspot behaves incorrectly, work through these likely causes:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallBest Value
| Symptom | Likely cause | Fix |
|---|---|---|
| No region responds to clicks | The image’s usemap fragment and the map’s name differ, or the fragment is missing its leading #. |
Make the values match exactly, for example usemap="#campus-map" and name="campus-map". |
| A hotspot is offset or the wrong size | Coordinates were measured against a different image size, or the displayed image was resized without scaling coordinates. | Measure against the intrinsic image dimensions, restore the measured size, or apply proportional scaling and retest at the rendered sizes. |
| Part of a rectangular area is missing | The four values are not in left, top, right, bottom order, or the boundaries do not match the intended region. | Check the order and confirm each boundary in the original image coordinate system. |
| A circular hotspot appears misplaced | The first two values were not entered as center x and center y, or the third is not the radius. | Use coords="center-x,center-y,radius" and verify all three values against the source image. |
| An irregular area misses its edges | Polygon x,y pairs were entered out of boundary order or omit a bend in the outline. | Trace the boundary in sequence and add points at meaningful corners; the browser closes the polygon if the final pair does not repeat the first. |
| Screen-reader users cannot tell where an area goes | An area has no useful alt, or the image’s own alternative does not convey its context. |
Add meaningful text to each linked area and an appropriate informative or empty image alternative. |
Or skip the browser setup
ScreenshotNeo does not create image maps or replace the HTML in this guide. It can capture a published page so you can inspect how the image and its links appear in a rendered screenshot. One GET request can return an image or PDF; the example below requests a WebP capture of Stripe. The ScreenshotNeo API documentation lists request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Replace the example URL with your published page and use an API key from your account. ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I use more than one image map on a page?
Yes. Give each map a distinct name, then set each associated image’s usemap value to the matching name prefixed with #.
Can a hotspot perform an action instead of opening another page?
An area can point to an appropriate URL or fragment. For an interface action that is not navigation, use a semantic control such as a button rather than presenting it as a link.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
