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

Interactive image, map, and floor plan questions — answered

Practical answers for building an interactive map, floor plan, venue guide, product diagram, or clickable image without getting stuck on coordinates, imports, embeds, or mobile layout.

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.

Maps, floor plans, and location guides

How do I make an interactive geographic map?: Create a Mapbox map, search for a place or address, and add a pin. Each location can have a title, description, image, video, category, link, phone number, and directions buttons. Turn on search, filters, clustering, or the visitor location list before copying the embed to your website.
Should I use an image map or a geographic map?: Use an Image map when your source is a floor plan, seating chart, venue illustration, product diagram, campus artwork, or any custom visual. Use a Mapbox map when pins need real-world addresses, geographic search, clustering, visitor filters, or directions. The choice is made when you create the map and cannot be changed later.
How do I make an interactive floor plan without coding?: Choose Image map, upload the floor plan you already have, and place one dot on each room, unit, desk, or zone. Add the room details and a link to a listing, booking page, virtual tour, or spec sheet, then paste the iframe into your site. No CAD file or plugin is required.
Can I import locations from a spreadsheet?: Yes. Mapbox maps accept CSV imports of up to 1,000 locations at a time and can connect to a published Google Sheet. The import flow automatically guesses column matches, lets you review the locations, and saves them only after you confirm the preview.
What columns does a location CSV need?: The useful columns are id, title, address, latitude, longitude, description, category, image, url, phone, email, hours, price, and tags. Title plus latitude and longitude are required for a direct import. Use a stable id when the rows will be refreshed from Google Sheets.
Can I import addresses without latitude and longitude?: Yes for a CSV import. Mapbox map tools can look up missing coordinates from an address, then show the resolved results for review before saving. The lookup handles up to 100 addresses per click, so you can check the matches before they become pins.
Can I keep a Google Sheet connected to the map?: Yes. Publish the sheet as a CSV, import it, and keep a stable ID in every row. The map can refresh the connected sheet hourly, while manually added pins and marker styles remain in place. Missing spreadsheet rows do not delete existing pins automatically.
Can I update many map locations at once?: Yes. Manage locations lets you select several pins and apply the same category, visibility, or marker emoji change to all of them. This is useful after an import when a whole group needs the same filter category or should be hidden from visitors.
How do I keep a map with many pins readable?: Turn on marker clustering so nearby pins combine into numbered groups until visitors zoom in. Add categories and a visitor list so people can filter or scan locations instead of hunting through overlapping markers. For an image map, split very dense content into several focused visuals.
Can visitors search and filter an interactive map?: Yes. Mapbox maps can show a visitor search box, a location list, category filters, nearby-location controls, and clustering. Directions buttons can open the selected location in Google Maps or Apple Maps. These are map-wide settings that you can turn on or off before publishing.
Can I draw a service area, boundary, or coverage radius?: Yes. Mapbox maps can include a directly connected path, a highlighted polygon area, or a radius around a point. These shapes illustrate coverage or boundaries; they do not calculate road routes or turn-by-turn travel directions.
Can I add a custom background image to a geographic map?: Yes. A Mapbox map can use its geographic basemap and also accept a background image for a branded or illustrated layer. Use an Image map instead when the artwork itself is the complete map and its points do not need real-world coordinates.
Can each location have its own card and marker style?: Yes. Map-wide defaults make the map consistent, while each location can override its own card theme, marker style, size, color, content type, and opening behavior. Automatic defaults can match a marker to the location type until you choose a manual override.
Can a map pin open on hover or click?: Yes. Set the visitor opening behavior to hover or click in the map appearance settings. Click is usually clearer for touch screens and cards with links; hover can work well for short desktop labels. The setting applies to the map unless a location has its own override.
How do I make a campus, event, resort, or venue map?: Choose the format that matches the source: Mapbox for real buildings and addresses, or Image map for an illustrated campus, event floor plan, resort diagram, or venue artwork. Add categories such as entrances, food, restrooms, stages, or rooms, then enable the visitor list and filters.
Why are my floor-plan hotspots not lining up?: Check that the replacement image has the same crop and aspect ratio as the original. Hotspots are stored as percentages, so they remain aligned when the image scales, but changing the crop, adding margins, or using a different page image can move the visual reference underneath them.

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 a limited hotspot allowance (check your account for the exact limit) and shows a small Interactive Image credit on the embed. Paid plans are $9/month (Starter, 3 maps), $19/month (Business, 15 maps plus analytics) and $49/month (Agency, unlimited maps); all remove the credit, allow white-label embeds and lift the hotspot cap.
Is there a free plan?: Yes, and it is free permanently rather than a trial. It covers one published map with a limited hotspot allowance (check your account for the exact limit), 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?: For real locations, Interactive Image offers Mapbox maps with address search, imports, visitor filters, clustering, and external directions links. Consider a specialist tool for advanced GIS analysis, in-app navigation, presentation decks, or clickable prototypes. For custom image regions rather than point markers, SVG can offer 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

Need it built for you?

Big maps, bulk hotspots, custom designs or integrations, built by our team at Upcode.

Get a custom quote

Turn any image into a guided experience.

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

Create your interactive image