Guide
What is an interactive image?
An interactive image is a normal photo with clickable hotspots on it. Each hotspot opens a card with its own text, photo, video, and link — so one image can explain a whole product, room, or venue.
Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace
The image
Any photo, product shot, render, diagram, floor plan, or illustration you already have.
The hotspots
Markers pinned to specific points of that image, positioned as percentages so they scale.
The cards
What opens on hover or tap: a title, description, photo or video, and an optional link.
What you get
- Works with any image you already have
- Hotspots stay accurate at every screen size
- Cards can hold text, photos, video, and links
- Embeds into Wix, WordPress, Webflow, Squarespace, and Shopify
- No HTML image map coordinates to maintain
How an interactive image works
The image itself is unchanged — nothing is baked into the pixels. Each hotspot is stored separately as an x and y percentage of the image plus the content attached to it. When the page renders, the markers are positioned over the image at those percentages, which is why they stay accurate whether the image is 400px wide on a phone or 1600px wide on a desktop. Hovering or tapping a marker opens its card in place, so the visitor never leaves the page.
Interactive image vs. HTML image map
The original way to do this was the HTML <map> element with <area> shapes. It only supports links, not cards or media, and its coordinates are absolute pixels — so the clickable regions drift out of place as soon as the image is responsive. Modern interactive images use percentage positioning and real content cards instead. Read the comparison.
Common uses
- Product diagrams and spec callouts on an assembly or cutaway render
- Clickable floor plans for real estate, offices, and events
- Venue and seating maps with per-section detail
- Shoppable images that link each item in a lookbook to its product page
- Onboarding walkthroughs and annotated UI screenshots
How to make one
- Upload your image.
- Place a hotspot on each point you want to explain.
- Add the title, text, photo or video, and link for each one.
- Copy the embed snippet into your site — see the step-by-step guide or try the live editor.
Turn any image into a guided experience.
Free forever plan. Paste one iframe into your site and ship.
Create your interactive image