Free tools Windows power users keep installed
One-click scans. No signup required.
Most broken HTML image maps fail for one of four reasons: the image’s usemap value does not exactly match the map’s name, an area is outside its map, coordinates do not match the source image, or responsive CSS has resized the image without scaling the coordinates. Check those bindings first, then validate each hotspot’s geometry, destination, and accessibility.
Use a known-good image map first
Reduce your page to this small example. It demonstrates the required relationship between the image, the map, and its 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>The leading # in usemap="#site-map" is essential. It references the map by name, not by a file URL. The map name must be non-empty, contain no spaces, and be unique on the page. If you provide both id and name on the map, keep their values identical. Every area must be a child of that map.
Diagnose the binding in developer tools
- Inspect the rendered image. Confirm that the browser sees the exact value
usemap="#site-map". Check capitalization, punctuation, and the hash character. - Find the map. Search the DOM for
<map name="site-map">. There should be exactly one map with that name. - Check placement. Expand the map element and verify that every intended
areaappears inside it. An area elsewhere in the document is not associated with the image. - Test one simple hotspot. Temporarily remove complex areas and add
<area shape="rect" coords="0,0,200,100" href="/test" alt="Test link">. If this works, the association is correct and the original geometry needs attention.
Do not rely on a visible cursor change alone. An area without an href can look like a hotspot but has no navigation destination.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Validate shape and coordinate syntax
Coordinates are numbers in the source image’s pixel coordinate system. The first value is measured from the left edge and the second from the top. Do not add units such as px.
Rectangles
Use four values in this order: x1,y1,x2,y2. They represent opposite corners. For example, 40,40,220,160 covers a rectangle from (40, 40) to (220, 160).
Circles
Use three values: x,y,radius. The first two values locate the center; the third is the radius. A circle centered at (500, 250) with a 70-pixel radius is 500,250,70.
Polygons
Use successive x,y pairs: x1,y1,x2,y2,x3,y3.... The browser closes the shape between the final and first points. Missing a value, reversing a pair, or inserting a stray separator can put the clickable region somewhere unexpected.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors- Keep coordinates within the intrinsic width and height of the source bitmap.
- Use commas consistently; remove accidental words or units.
- When a polygon is difficult to debug, replace it with a rectangle covering the same approximate region, then add points back gradually.
Fix image resizing and moving hotspots
Image-map coordinates belong to the image’s coordinate system. Browser zoom, CSS transforms, and SVG do not rewrite the coordinate values. If CSS displays an 800×500 image at 400×250, the bitmap is smaller but the original coordinates remain 800×500 values, so hotspots can be offset.
Choose a sizing strategy
- Fixed rendering: Render the image at its coordinate dimensions. This is the simplest and most predictable approach for a desktop diagram.
- Proportional coordinate scaling: Keep responsive CSS, but use carefully tested JavaScript to scale every coordinate whenever the rendered size changes. Recalculate on load, resize, orientation changes, and any layout change that affects the image.
- Replace the map: Use ordinary links beside the image or an SVG with responsive geometry when the interaction must work consistently across mobile widths.
A common rule such as img { width: 100%; height: auto; } is therefore not sufficient by itself. Compare the image’s natural dimensions (for example, naturalWidth and naturalHeight) with its rendered dimensions in the browser inspector. If either ratio differs, expect coordinate drift unless you scale the areas.
When scaling is worth the maintenance
Coordinate-scaling scripts must preserve separate formats for rectangles, circles, and polygons. A rectangle needs both corners scaled; a circle needs its center and radius scaled; every polygon pair needs scaling. Test intermediate widths, not only the largest and smallest viewport, because rounding can create narrow gaps or overlaps.
Check destinations and interaction details
- Give every navigational area an
hrefthat resolves to the intended absolute or relative URL. - Use a meaningful
alton the image, such as “Site plan,” describing the image’s purpose. - Give each linked area an
altthat names the choice a sighted user gets from that region: “Office,” “Garden,” or “Warehouse,” not “hotspot 1.” - Do not put several images on one map. Give each image its own map and unique name; reusing a map can produce unexpected behavior and makes the relationship harder for assistive technology to expose.
- If a region is not a link, consider whether it belongs as an area at all. A decorative area should not imply an unavailable action.
Image maps are a reasonable choice when the spatial relationship is meaningful, such as selecting a room on a floor plan. For primary navigation, a list of normal links next to or below the image is easier to operate with a keyboard, easier to test, and more robust on mobile. You can retain the map as a visual shortcut while exposing the same destinations as ordinary links.
Recommended Free Tools
Use this troubleshooting sequence
The whole image is not clickable
- Confirm the image has
usemapand that its value starts with#. - Confirm the map’s
nameexactly matches the value after the hash. - Ensure the map name has no spaces and is unique.
- Check that the map is valid HTML and that areas are nested inside it.
One area does not respond
- Verify the area has an
href. - Replace it temporarily with a rectangle to separate a geometry problem from a binding problem.
- Count the coordinate values for its shape and inspect their order.
- Check that the coordinates fall inside the source image’s intrinsic dimensions.
Hotspots work at one width but not another
- Compare natural and rendered image sizes.
- Look for
width: 100%, max-width rules, flex or grid stretching, transforms, and browser zoom. - Use fixed rendering, implement proportional scaling, or move to SVG/ordinary links.
Clicks reach the wrong page
- Inspect the final rendered
href, including any framework-generated URL. - Test the destination directly in a new tab.
- Check for an overlapping element, transparent overlay, or script that intercepts the click.
Mobile or assistive technology cannot use it
- Do not assume desktop coordinates will scale on a phone.
- Provide equivalent ordinary links.
- Use meaningful alternatives for both the image and each area.
- Test keyboard focus, touch targets, screen-reader names, and several viewport sizes.
Or skip the browser setup
If your goal is to capture a page or diagram for documentation rather than debug the map interactively, ScreenshotNeo returns a screenshot or PDF from 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 response headers identify the page verdict and billing status. Its MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf.
See the full parameter list in the ScreenshotNeo documentation. A direct cURL request is:
Rank #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
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}`);ScreenshotNeo includes full-page and element capture, device and retina settings, custom CSS or JavaScript, waits, request blocking, headers, cookies, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Every feature is available on every plan: 1,000 screenshots per month are free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability, and maintenance choices
- A fixed-size map has virtually no coordinate-maintenance logic, but it may require horizontal scrolling on small screens.
- Scripted scaling avoids duplicate artwork, but adds resize handling, rounding issues, and a testing burden.
- SVG and ordinary links generally make responsive geometry and keyboard behavior easier to maintain, especially when artwork changes frequently.
- When the underlying image is replaced, recalculate every coordinate from the new intrinsic dimensions; do not assume visually similar artwork has identical geometry.
- Keep a simple rectangle test area in a development fixture. It quickly distinguishes broken association from bad production geometry.
Frequently asked questions
Can I use an id instead of name on the map?
The interoperable pattern is a non-empty name referenced by usemap. If you also set id, make it the same value.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Why does browser zoom not repair a misaligned map?
Zoom changes how the page is displayed, not the coordinate values stored for the areas. A mismatch between intrinsic and rendered image dimensions still needs a sizing or replacement strategy.
Best Value
Are image maps always inaccessible?
No. Meaningful image and area alternatives, keyboard testing, and equivalent ordinary links can make the choices understandable. For core navigation, ordinary links are usually easier to operate and maintain.
Should I use an image-map generator?
A generator can reduce coordinate-entry errors, but it cannot choose a responsive strategy or supply good alternative text. Verify its output against the binding and accessibility checks above.
Frequently Asked Questions
What is the fastest test for a broken image map?
Use one rectangle with known coordinates, a real href, and an alt value. If it works, debug the original shape or responsive sizing rather than the map binding.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do CSS transforms scale image-map areas?
No. Transforms and zoom do not rewrite the area coordinates, so the rendered image and coordinate system can diverge.
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.
