Top 3 Image Map Generators Worth Using

A floor plan where each room links somewhere. A diagram where every component opens its own documentation page. You need parts of one image to be separately clickable, and CSS overlays are more work than the job deserves.

HTML image maps have done this since the mid-nineties, using <map> and <area> with pixel coordinates. That age is both why they still work everywhere and why they have two well-known problems: the coordinates are fixed pixels, so they break when the image scales, and almost nobody adds the alt text that makes each region mean anything to a screen reader.

How to judge an image map generator

Which shapes? Rectangles handle most cases. Circles and polygons matter for anything that is not a grid — a country on a map, a component in a diagram.

Does it solve the responsive problem? Raw <area> coordinates are absolute pixels. A generator that only outputs those hands you a map that misaligns the moment the image is resized.

Does it prompt for alt text? Each <area> needs its own. Without it, a screen reader announces a link with no description — several times over.

Does the image get uploaded? Floor plans and internal diagrams are frequently not public.

The comparison

Facts checked August 2026; tools change. Table covers only the 3 alternatives — our tool gets its own section below.

Image-Map.net

The most direct. Load an image, draw rectangles, circles or polygons by clicking, then hit “Show Me The Code!” for the generated <map> and <area> markup. No account, free.

Its privacy position is clearly stated: all processing happens client-side using HTML5, SVG and JavaScript, and no image from your machine is ever transferred out of the browser. What its page does not address is responsiveness — you get coordinate-based markup, which is correct and fragile in exactly the way image maps have always been fragile.

Fla-shop Image Map Generator

The one that offers a way out of the pixel-coordinate problem. Alongside rectangles, circles and polygons, it can output either classic HTML 3.2 code or “Adaptive SVG Code”, labelled device-friendly. An SVG-based overlay scales with the image rather than sitting at fixed offsets, which is the actual fix for the responsive issue rather than a workaround.

It states the image is only uploaded and processed within your browser and is not transmitted to their server, and it is free with no account. The HTML 3.2 option is there for legacy compatibility; if you take that path you inherit the scaling problem.

MACM Image Map Generator

Notable for exposing the attributes that matter. It draws rect, circle and poly areas and lets you edit href, alt and title per area, producing production-ready HTML. Editing alt per region is the part most generators skip entirely, and it is the difference between an accessible image map and a set of anonymous links.

Its page carries less detail than the other two about where processing happens or what the output covers, so verify those before using it on anything sensitive.

Image Map Generator

Ours defines clickable areas on an image and outputs the <map> and <area> markup with the accessibility attributes image maps usually omit. That is the deliberate emphasis: the markup is easy, the alt text on every area is what people leave out, and a map of twelve unlabelled links is worse for a screen reader user than no map at all.

What it does not do: output an adaptive SVG version, so the coordinates are absolute like every classic image map. If your image scales responsively, Fla-shop’s SVG output solves a problem ours does not. MDN’s <map> documentation covers the element’s requirements if you want to check the output by hand.

Which one to pick

• An image that resizes with the viewport — Fla-shop’s adaptive SVG.
• A fixed-size diagram, quickly — Image-Map.net.
• Per-area attribute editing — MACM, or the tool below.
• Accessible markup you will not need to fix later — the tool below.

How to do it with Image Map Generator

1. Open the Image Map Generator and load your image at the exact size it will display.
2. Draw each region, choosing the shape that fits — polygons for anything irregular.
3. Give every area a link and a genuine alt description, not “click here”.
4. Test with the keyboard: every area should be reachable by tabbing.

The walkthrough is in how to make clickable regions on an image. Other developer tools are in the tools directory.

You might also need

If the image needs resizing before you map it, do that first — the Image Resizer sets the dimensions the coordinates will be based on.

For diagrams you are building rather than annotating, the SVG to PNG Converter handles the format change in the other direction.

Frequently asked questions

Is there a free image map generator that doesn’t upload my image?

Yes. Image-Map.net and Fla-shop both state the image stays in your browser, and ours runs locally too. That matters for floor plans, internal diagrams and anything not yet public.

Do image maps work on mobile?

The clicks work; the coordinates are the problem. <area> positions are absolute pixels tied to the image’s original size, so a responsively scaled image puts the regions in the wrong places. An SVG overlay or a JavaScript resize handler is the usual fix.

Are image maps accessible?

They can be, and usually are not. Each <area> needs its own meaningful alt text, and the regions need to be keyboard reachable. Done properly they are fine; done by default they produce a run of unlabelled links.

Final thought

Write the alt text as you draw each region, not afterwards. Nobody has ever gone back to add it later, which is why most image maps on the web are a row of identical unnamed links.

Try the free Image Map Generator