Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Most broken image maps have one of four causes: the image’s usemap value does not exactly match the map’s name, an area is outside the map, coordinates do not match the declared shape, or responsive CSS has resized the bitmap without scaling its hotspots. Start with the minimal example below, then follow the diagnostic steps in order.
A known-good image map
This complete example demonstrates the required relationship between the image, map, and areas:
<img src="plan.png" width="800" height="500"
usemap="#site-map" alt="Site plan">
<map name="site-map">
<area shape="rect" coords="40,40,220,160"
href="/office.html" alt="Office">
<area shape="circle" coords="500,250,70"
href="/garden.html" alt="Garden">
<area shape="poly" coords="600,80,760,80,720,220,620,220"
href="/warehouse.html" alt="Warehouse">
</map>usemap="#site-map"includes a leading hash.name="site-map"is non-empty, has no spaces, and is unique.- Every
areais a child of thatmap. - Each area has a shape, valid coordinates, an
href, and useful alternative text.
1. Check the image-to-map binding
Open developer tools, inspect the rendered image, and verify that its actual attribute is exactly usemap="#site-map". Then search the DOM for a single <map name="site-map">. Matching is case-sensitive: #Site-Map, #site-map, and #site_map refer to different names.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →The hash is required on usemap; it identifies the map by name. Do not put the hash in the name value itself. If you provide both id and name on a map, keep them identical:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<img src="plan.png" usemap="#site-map" alt="Site plan">
<map id="site-map" name="site-map">...</map>Also check that a template, component, or JavaScript framework has not generated duplicate map names. A map name must be unique on the page.
2. Confirm the DOM structure
An area only belongs to the map that contains it. Invalid placement, such as putting <area> beside <map> or inside a different element, produces an image with no working hotspot:
<map name="site-map">
<area shape="rect" coords="40,40,220,160" href="/office.html" alt="Office">
</map>Inspect the live DOM, not only the source template. Server-side rendering, sanitizers, and client-side rendering can move or remove elements before the browser processes them.
Free tools Windows power users keep installed
One-click scans. No signup required.
3. Verify shape and coordinate syntax
Coordinates are numbers in the source image’s pixel coordinate system. They are not CSS lengths and should not include px, percentages, or parentheses.
| Shape | Coordinate format | Meaning |
|---|---|---|
rect |
x1,y1,x2,y2 |
Opposite corners of a rectangle |
circle |
x,y,radius |
Center point and radius |
poly |
x1,y1,x2,y2,... |
Successive vertices of a polygon |
Use four values for a rectangle, three for a circle, and an even number of values for a polygon. Commas are the clearest separator. Keep coordinates within the intrinsic width and height of the image; negative values, accidental text, or a missing polygon pair can make the clickable region appear absent or malformed.
Reduce the problem to one rectangle
Temporarily replace your areas with a simple test region:
<area shape="rect" coords="0,0,200,100"
href="/test" alt="Test link">If this works, the image-map binding is sound and the original polygon or coordinate order needs correction. If it does not, continue with the binding and DOM checks rather than editing geometry.
4. Check that every area can navigate
An area without an href can look like a hotspot in source code but cannot take the user anywhere. Confirm that each destination is present, correctly escaped, and resolves to the intended URL. For a same-page target, use a valid fragment such as href="#details". Test links with the keyboard as well as the pointer; a missing destination is often easier to spot when tabbing through the page.
5. Fix hotspots that move when the image is resized
Image-map coordinates remain tied to the image coordinate system. Browser zoom, CSS transforms, and SVG do not rewrite the coordinate values. A rule such as img { width:100%; height:auto; } can therefore display an 800-pixel image at 400 pixels while leaving a rectangle defined for the original 800-pixel geometry. The visible hotspot will be offset or have the wrong size.
Option A: preserve the coordinate-sized rendering
For a fixed desktop map, render the image at its intrinsic dimensions (or at a known, fixed scale) and prevent layout rules from stretching it. This is the least fragile solution when the artwork and viewport are controlled.
Option B: scale coordinates deliberately
If the image must resize, calculate a scale factor from its rendered dimensions and apply it to every coordinate. The calculation must run after the image loads and whenever its rendered size changes. A conceptual implementation for a rectangle is:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
const image = document.querySelector('img[usemap]');
const sourceWidth = image.naturalWidth;
const renderedWidth = image.getBoundingClientRect().width;
const scale = renderedWidth / sourceWidth;
// Original rectangle: 40,40,220,160
const scaled = [40, 40, 220, 160].map(value => value * scale);In production, update all rectangles, circles, and polygon pairs, account for both width and height if the aspect ratio can change, and rerun on resize. Test touch targets at every supported breakpoint. A script that scales only width will be wrong if CSS stretches the image vertically.
Option C: replace the map for responsive interaction
When interaction must work consistently on phones, replace the map with ordinary links, an accessible list, or an inline SVG whose geometry and labels are designed for responsive layouts. W3C accessibility guidance warns that image maps may fail on mobile when areas are not scaled in the same proportions as the image. A list of links beside or below the image is easier to operate, test, and expose to assistive technology. Keep the map only when the spatial relationship adds genuine value.
6. Check duplicate map reuse
Do not point several images at one map. Give each image its own map and unique name:
<img src="floor-1.png" usemap="#floor-one" alt="First floor">
<map name="floor-one">...</map>
<img src="floor-2.png" usemap="#floor-two" alt="Second floor">
<map name="floor-two">...</map>Reusing a map can create unexpected hit testing and accessibility behavior, particularly when images have different intrinsic dimensions.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsRank #4
- 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
7. Make the map usable with assistive technology
The image needs meaningful alt text, and every navigation area needs an alt that communicates the same choice a sighted visitor gets from that region. “Click here” is not useful; “Office,” “Garden,” and “Warehouse” are. If the image is purely decorative and the links are duplicated elsewhere, use an appropriate empty image alternative while retaining descriptive area labels where they remain the navigation mechanism.
Provide ordinary text links as a fallback when regions are primary navigation. This also gives keyboard and screen-reader users a predictable list and ensures the destinations remain discoverable if images are blocked.
A practical troubleshooting order
- Inspect the live image and verify the leading-hash
usemapvalue. - Confirm exactly one map has the matching, unique
name. - Ensure every area is inside that map.
- Replace complex geometry with one rectangle.
- Validate the number and order of coordinate values.
- Confirm each area has an
hrefthat resolves. - Compare intrinsic and rendered image dimensions.
- Remove duplicate map reuse.
- Test keyboard focus, touch targets, and alternative text.
Or skip the browser setup
When you need a clean reference screenshot while debugging a map, ScreenshotNeo can capture the page through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools to Claude, Cursor, and other MCP clients.
Use the documented API options and parameter names in the ScreenshotNeo documentation. A direct cURL capture is:
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import 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)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Free usage includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account.
FAQ
Can an image map use percentage coordinates?
No. Area coordinates are numeric values in the image’s coordinate system. Percentage strings are not a responsive substitute; scale the coordinates in code or choose SVG or regular links.
Best Value
Why does the pointer not change over an area?
Check that the area has an href, is inside the intended map, and that no transparent element or overlay is covering the image. A rectangle test area quickly separates hit-testing problems from polygon geometry errors.
Should I use an image map for a navigation menu?
Usually not. If the spatial layout is not essential, ordinary links are easier to maintain and more reliable on mobile and assistive technology. Use a map when the regions’ relationship to the image is the purpose of the interaction.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Frequently Asked Questions
Can an image map use percentage coordinates?
No. Coordinates are numeric values in the image coordinate system; use calculated scaling, SVG, or regular links for responsive layouts.
Why does the pointer not change over an area?
Verify the area has an href, is inside the intended map, and is not covered by another element. Test with a simple rectangle.
Should I use an image map for a navigation menu?
Only when the spatial relationship is essential; otherwise ordinary links are more maintainable and accessible.
The Bottom Line
Match usemap to one unique map name, keep every area inside that map, validate shape-specific coordinates, and treat responsive resizing as a deliberate scaling problem. If the spatial layout is not essential, ordinary links or SVG are usually the more dependable design.
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.
