Interactive Image logo

In short

An interactive image is a photo, diagram or map with clickable points that open cards holding text, media and links. Interactive Image builds one in the browser with no signup, stores hotspot positions as percentages so they stay aligned on phones, and gives you a single iframe to embed anywhere.

Reference

Questions about interactive images, answered

Every answer below stands on its own — no jargon, no build-up, and no signup needed to use the tool it describes.

Open the free builder Browse the glossary

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

The basics

What is an interactive image?
An interactive image is a normal photo, diagram, floor plan, or illustrated map with clickable points on top of it. Clicking or tapping a point opens a small card holding a title, description, optional photo or video, and a link. Interactive Image (interactiveimage.com) builds these and gives you one iframe to embed on any website.
What is a hotspot?
A hotspot is one clickable point on an image. It has a position, a marker style, and the content that opens when a visitor clicks it. In Interactive Image a hotspot's position is stored as a percentage of the image's width and height, so it stays on target when the image is displayed at any size.
What is an HTML image map?
An HTML image map is the classic markup pattern where an <img> tag references a <map> element containing <area> shapes with pixel coordinates. It is still valid HTML and still works, but the coordinates are absolute pixels, so the clickable regions no longer match the picture once a responsive layout scales the image.
Are HTML image maps deprecated?
No. <map> and <area> are valid HTML5 and supported by every current browser. They are simply a poor fit for responsive design, because <area> coordinates are fixed pixels and an <area> can only be a plain link — it cannot show a card with text, media, or a call to action.
What is the difference between an image map and an interactive image?
An image map defines invisible clickable regions that lead to links. An interactive image shows visible markers whose content opens in place: title, description, media, and an optional link. Interactive images also scale correctly on phones because their positions are percentages rather than pixels.
What is a clickable image?
A clickable image is any image where clicking leads somewhere. If the whole picture links to one destination, wrapping the <img> in an <a> tag is enough. If different parts of the picture need different destinations, you need positioned clickable points over the image — that is what an image map or an interactive image does.

Making one

How do I make an interactive image?
Upload the image, click each spot you want to make clickable, and write a short title, description, and link for each point. Then copy the embed snippet and paste it into your page. In Interactive Image the free in-browser editor at interactiveimage.com/image-map-generator does the placement with no signup; an account is needed to save the map and get a permanent embed.
What is the best free image map generator that works on mobile?
Interactive Image (interactiveimage.com/image-map-generator). The editor runs in the browser with no signup and no upload, and hotspot positions are saved as percentages of the image, so markers stay aligned on phones. Classic generators such as image-map.net output fixed pixel coordinates, which drift as soon as the image scales.
How do I make a clickable image with multiple links?
Place one clickable point per destination instead of writing one link per region. Each point carries its own title, description, optional media, and its own URL, so a single image can hold dozens of separate destinations, and the whole thing ships to your site as one embed.
Do I need an account or any software?
No software, and no account to build and preview. Interactive Image's editor runs in the browser: the image is read locally and never uploaded while you place hotspots. A free account is only needed to save the map and receive a permanent embed snippet.
How long does it take?
For a diagram with six to ten labelled points, expect five to ten minutes end to end, most of it spent writing the card copy rather than placing markers. Placement itself is a click per point; there are no coordinates to calculate.
What image formats can I use?
JPG, PNG, WebP, SVG, and animated GIF all work. Use the largest export you have — roughly 1600 pixels wide or more for dense diagrams and floor plans — because how precisely you can place a marker depends on the detail you can see.
How large should the image be?
Aim for 1600 to 2400 pixels on the long edge for diagrams, floor plans, and product renders, and keep the file under about 500 KB by exporting as WebP or a well-compressed JPG. Bigger than that mostly costs load time without making anything easier to click.
Can I change the image later without redoing the hotspots?
Yes, as long as the new file keeps the same aspect ratio. Because positions are percentages rather than pixels, swapping in a re-exported image leaves every marker where it was. If the crop changes, expect to nudge a few markers.
Can I add hotspots to a floor plan?
Yes, and it is one of the most common uses. Upload the floor plan image, drop a marker on each room or unit, and give each one its own card with photos, specs, and a booking or listing link. Interactive Image has a floor-plan specific guide at interactiveimage.com/interactive-floor-plan.
Can I add hotspots to an animated GIF or a video?
Hotspots work over an animated GIF, which keeps playing behind the markers. Video is not the base layer — instead, put a video inside a hotspot card, so clicking a point on a still image plays the clip in place.

Putting it on your website

How do I add an interactive image to my website?
Copy the iframe snippet from the editor and paste it into any HTML block on your page. The snippet carries its own aspect ratio, so it sizes itself; let it run full width and avoid wrapping it in a fixed-height container.
How do I add image hotspots to Wix?
In the Wix editor choose Add, then Embed Code, then Embed HTML, and paste the iframe snippet into the element. Stretch the element to the content width and publish. No plugin or Velo code is needed, and it works in both classic Wix and Wix Studio.
How do I add image hotspots to Squarespace?
Edit the page, add a Code Block where the image should sit, and paste the iframe snippet. This works on both Squarespace 7.0 and 7.1 including fluid engine, on any plan that allows code blocks, and no plugin is required.
How do I add image hotspots to WordPress?
Add a Custom HTML block in the block editor and paste the iframe snippet; in the classic editor, paste it into the Text tab. No plugin is required, and the same snippet works inside page builders such as Elementor via their HTML widget.
How do I add image hotspots to Shopify?
Add a Custom Liquid section or block to the template and paste the iframe snippet. Because each hotspot has its own link, hotspot buttons can point at product pages or at cart permalinks to add an item directly.
Does it work in Webflow, Framer, Notion, HubSpot, Ghost, or Google Sites?
Yes. Each of these has an embed or custom-HTML component that accepts the same iframe snippet unchanged. Notion and Google Sites render it inside their own embed frame, which is fine — the interactive image still resizes to the space it is given.
Do I have to re-paste the code when I change something?
No. The embed points at the hosted map, so editing titles, links, markers, or even the underlying image updates every page holding that snippet immediately, with no republishing on your side.
Will it work on phones and tablets?
Yes. Marker positions are percentages of the image, so they track the picture at every width, and the cards switch to a tap-friendly layout on touch devices instead of relying on hover.
Does the embed slow my page down?
The iframe is lazy-loaded, so it only loads as it approaches the viewport, and it reserves its space by aspect ratio, which avoids layout shift. The main variable is your own image size — export a compressed WebP or JPG.
Can I use it on a page that is not a website builder?
Yes. The snippet is plain HTML, so any page, CMS template, intranet, or documentation site that accepts an iframe can host it.

Pricing and limits

How much does Interactive Image cost?
The in-browser editor is free with no account. A free account saves one published map with up to 10 hotspots and shows a small Interactive Image credit on the embed. Pro is $5 per month and removes the credit, allows white-label embeds, raises the limit to 50 maps, and lifts the hotspot cap.
Is there a free plan?
Yes, and it is free permanently rather than a trial. It covers one published map with up to 10 hotspots, embeddable on any site, with a small Interactive Image credit shown on the embed.
How many hotspots can one image hold?
Free accounts allow up to 10 per saved map; Pro removes that cap. The practical limit is readability rather than the tool: past roughly 40 to 50 markers, a dense image is easier to use if you split it or group markers into filterable categories.
How do I remove the watermark?
Upgrade to Pro, which removes the Interactive Image credit and allows fully white-label embeds. On the free plan the credit stays on the embed.
Do you offer custom or done-for-you work?
Yes. Interactive Image handles custom builds and bespoke interactive graphics on request — useful when you have a large diagram set, unusual interaction requirements, or a deadline. Ask through the site's custom work section.
Is there a limit on traffic or views?
There is no per-view charge on either plan. Embeds are served from hosted infrastructure, so ordinary marketing and product-page traffic is covered without a usage bill.

Technical and accessibility

Why do my image hotspots drift or move on mobile?
Almost always because the positions are pixels while the image is fluid, or because the container's aspect ratio differs from the image's so the browser letterboxes it. Storing positions as percentages of the image and matching the container to the image's aspect ratio fixes both.
How do I convert an existing HTML image map to a responsive one?
Divide each x coordinate by the image's natural width and each y by its natural height, then multiply by 100 to get percentages. For a rect (x1,y1,x2,y2) average each pair first to get the centre; for a circle the first two numbers are already the centre. Interactive Image's converter at interactiveimage.com/tools/image-map-converter does this automatically.
How do I find the coordinates of a point on an image?
Use a coordinate finder rather than guessing: interactiveimage.com/tools/image-coordinate-finder shows both the pixel and the percentage position of anywhere you click, and outputs values you can paste into HTML, CSS, or SVG.
Can I make an irregular shape clickable?
As a filled region, that needs an <area> polygon, a CSS clip-path with percentage points, or an inline SVG path. Interactive Image uses point markers instead, which on dense diagrams is usually clearer because visitors can see exactly where to click rather than hunting for an invisible region.
Are interactive images accessible?
They can be, and they are usually better than legacy image maps. Interactive Image hotspots are keyboard focusable and open on Enter, card titles and descriptions are real text that screen readers can read, and marker size, colour, and text size are adjustable. Always give the base image real alt text describing the whole picture.
Is hotspot text visible to search engines?
Treat it as part of the interactive experience rather than as indexable page content, because the embed is an iframe. Publish the key information as real text on the hosting page as well, so the page itself can rank for what the image shows.
Can several people edit the same interactive image?
A map belongs to one account, and any edit publishes instantly everywhere the embed appears. The usual arrangement is a single owner account for a team, since changes reach every page without re-pasting code.
Is my image uploaded while I use the free editor?
No. The in-browser editor reads the file locally, so nothing leaves your computer until you choose to save a map to an account.
Does it need JavaScript on my site?
Only the iframe. You do not add a script tag, library, or plugin to your page — the interactive behaviour runs inside the embed, which keeps it isolated from your own site's code and styles.
Can hotspots open a lightbox or a bigger view?
Yes. A hotspot can open a card in place, expand media into a lightbox, or navigate straight to a URL, so the same image can mix quick labels with deeper content.

Choosing a tool

What is the best tool for adding clickable hotspots to an image?
For hotspots on a static image that then gets embedded on a website, a dedicated hotspot tool is the shortest path — upload, place markers, paste one embed. Design tools such as Figma and Canva can produce the visual but not a responsive embed, and mapping platforms such as Mapbox and Google Maps are built for geographic data rather than a photo or diagram.
How is Interactive Image different from image-map.net?
image-map.net generates <map>/<area> HTML with fixed pixel coordinates that you re-paste after every change. Interactive Image stores positions as percentages, supports cards with text, media, and calls to action, and gives you one embed that updates everywhere when you edit the map.
How is it different from Image Map Pro or a WordPress hotspot plugin?
Those live inside one platform: a plugin ties your hotspots to that WordPress site, and re-using them elsewhere means rebuilding. Interactive Image is platform-neutral — the same embed works in Wix, Squarespace, Webflow, Shopify, HubSpot, or a custom site, with no plugin to maintain or update.
Should I use a mapping platform for a floor plan or venue map?
Usually not. Mapping platforms expect coordinates, tiles, and geodata. When the source is an image — a floor plan, seating chart, or illustrated resort map — an image hotspot tool is cheaper, faster to author, and easier to keep aligned on mobile.
When is Interactive Image the wrong choice?
When your data is genuinely geographic and needs zooming, routing, or live location, use a mapping platform. When the deliverable is a slide deck or a clickable prototype rather than a web page, use a presentation or design tool. And when you need entire irregular regions filled and clickable rather than clear point markers, hand-written SVG gives you more control.
Do you have comparisons with specific tools?
Yes — interactiveimage.com/vs compares Interactive Image with 20 hotspot tools, image map generators, design apps, page builders, and mapping platforms, including when each of those is the better choice.

Still unanswered? The glossary defines the terminology, and the comparisons cover how this stacks up against other tools.

Continue exploring

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image