Free image map generator — no signup, works on mobile

The browser generator on this page is useful for trying an image and exporting markup. In a saved account map, choose a dot's type in Content to add the appropriate text, image, video URL, or destination. Use Appearance for per-dot styling and Map settings for shared defaults. Hosted iframe embeds reflect saved changes; exported HTML, CSS, and SVG are copies that you maintain separately.

HTML image maps use <map> and <area> with hard-coded pixel coordinates. They were designed for a fixed-size web, so the moment your image scales — on a phone, in a card, inside a modal — the clickable regions drift off the picture.

Interactive Image stores every hotspot as a percentage of the image. The dots stay glued to the image no matter what container or device renders them. That is what makes this a proper image map generator for modern responsive websites.

Say you mark a button on a 1200px-wide diagram at x=600. In a classic image map that becomes a literal coordinate:

<img src="diagram.png" usemap="#m" width="1200">
<map name="m">
  <area shape="circle" coords="600,300,20" href="/part-a">
</map>

On a 390px phone the browser paints the image at roughly a third scale, but coords still says 600,300 — a point now far off the right edge of the picture. The hotspot is simply gone.

Interactive Image records the same point as x: 50%, y: 50%. Half of 1200px is 600px; half of 390px is 195px. The dot lands on the same feature at every width, with no media queries and no second mobile version to keep in sync.

If you already have a working image map, you don't need to re-derive anything by hand. Convert it in five steps:

1. Find the image's natural width and height. It's usually on the <img> tag, or you can check the file's properties. Every old coordinate is relative to these numbers.
2. Upload the same image file. Use the original, not a resized copy — that keeps your existing coordinate maths valid.
3. Convert each area's centre to a percentage. For a circle, the first two numbers are already the centre. For a rect (x1,y1,x2,y2), average the pairs. For a poly, take the middle of its bounding box. Then divide x by the image width and y by the height.
4. Place a hotspot per area. Type the percentages in, or just click the spot on the image — for most maps clicking is faster than the arithmetic.
5. Move each link and title across. The old href becomes the hotspot's CTA link and the alt becomes its title. Then swap the whole img+map block for the iframe snippet.

One behavioural difference worth knowing: an <area> is a plain link, while a hotspot opens a popup that can hold a title, description, image, and link. If you want a hotspot to navigate immediately instead, point its CTA at the old URL and keep the popup copy short.

The honest trade-off: a true <area> polygon can make an entire irregular shape clickable, whereas a hotspot is a point. For dense diagrams and floor plans a point marker is usually clearer anyway — it tells the visitor where to click instead of leaving them hunting for an invisible region.

Legacy image maps are a known accessibility weak point. The clickable regions are invisible, so a sighted user can't tell what's interactive, and a screen-reader user gets nothing but whatever alt text the author remembered to write on each area — frequently none at all.

• Visible affordance. Hotspots render as actual markers, so it's obvious where to click without hover-hunting.
• Keyboard reachable. Hotspots are focusable and open on Enter, so the whole image is navigable by Tab.
• Real text in popups. Titles and descriptions are DOM text, not baked into the image — readable by assistive tech and selectable by anyone.
• Adjustable size and contrast. Marker size, color, and popup text size are settings, which matters for low-vision users and for markers over busy photography.

Always give the base image real alt text describing the whole picture too. Our guide to accessible image maps covers focus order, ARIA roles, and contrast in more detail.

The pattern works anywhere a picture is easier to scan than a list: product and parts diagrams, interactive floor plans for property and venue pages, campus and store maps, org charts, infographics, and annotated screenshots for documentation. If your plan is a building layout, the floor plan tool is the same engine with room-specific guidance.

Take a 1920x1080 product render with six parts to label. Here is the whole job, including the numbers, so you can follow it on your own image in the editor above.

1. Drop the render into the editor. Use the full-size export. Detail you cannot see is detail you cannot click accurately.
2. Click the first part. If the part sits 480px across and 270px down, the editor records x: 25%, y: 25% — 480/1920 and 270/1080. You never type either number.
3. Write the card. Title the part, add a line or two of description, and point the CTA at that part's page in your catalogue.
4. Repeat for the other five, then group them with categories if the diagram splits naturally — electrical versus mechanical, for instance — so visitors can filter.
5. Check three widths. Full desktop, a tablet-ish 768px, and a 390px phone. Percentage positions mean all three should match; this is the step that catches an image cropped after placement.
6. Copy the embed and paste it once. Later edits to titles, links, or the image itself appear on every page holding that snippet — no re-pasting.

The finished map is a single iframe, so every builder with an HTML block takes it without a plugin:

• Wix: Add → Embed Code → Embed HTML, paste, stretch the element to the content width. Wix walkthrough.
• Squarespace: insert a Code Block on 7.0 or 7.1 and paste. Squarespace walkthrough.
• WordPress: a Custom HTML block in the editor — no plugin, works on classic themes too. WordPress walkthrough.
• Shopify: a Custom Liquid section, which also lets hotspot CTAs use cart permalinks. Shopify walkthrough.
• Webflow, Framer, Notion, HubSpot, Ghost, Google Sites: each has an embed or HTML component that accepts the same snippet unchanged.

One rule everywhere: let the embed be full width and don't wrap it in a fixed-height container. The snippet already carries an aspect ratio, so the height follows the image.