Add Interactive Hotspots to an Image

An image hotspot is a marker placed on a picture that reveals a note when a reader clicks or taps it. A single static image can only carry as much text as fits on top of it; an image hotspot generator moves that text into a panel that opens on demand, so the picture stays clean and the explanation can be as long as it needs to be.

The usual reason to add hotspots to an image is that the picture and the explanation are doing two different jobs. A product photo shows what something looks like; the hotspot explains what each part does. A floor plan shows the layout; the hotspot says what happens in each room. Keeping the two separate means the same image can serve readers who only glance at it and readers who want every detail.

Most interactive image maker tools are hosting services: they keep your project on their server and give you an embed code. That is convenient until you need the file to work somewhere they do not reach — an intranet, a USB stick, an email attachment, or a page you will still own in five years.

This tool goes the other way and exports an offline interactive image. The CSS, the script and the hotspot data are inlined into image hotspot html that reads its picture by relative path, so unzipping the folder and double-clicking the file is enough. There is no account to expire, no CDN to go offline, and no code that phones home. If you would rather ship one file instead of a folder, the optional single-file build embeds the image as a data URL.

Hotspots are recorded against the natural pixel size of your source image and stored on export as percentages of its width and height. Because the overlay and the picture share one box and the picture keeps its aspect ratio, responsive image hotspots stay over the same detail whether the image is 1024 pixels wide on a desktop or 360 pixels wide on a phone.

That guarantee has a boundary worth knowing: it assumes the picture keeps its aspect ratio. If you crop the image afterwards, or place it in a container that crops it — a fixed-height card using object-fit: cover, for example — part of the picture is no longer visible and the percentages no longer land where you put them. Resize the image freely; if you change what is visible, re-check the hotspots.

A hotspot that only appears on hover is invisible to anyone using a keyboard or a touch screen. Every hotspot here is a real button: it can be reached with Tab, opened with Enter or Space, and closed with Escape or an explicit close button. Tapping on a phone pins the note open instead of flashing it, and the panel is kept inside the picture so it is never cut off at the edge of the screen.

Underneath the image, the same notes are rendered as an ordinary text list with the same links. It is useful for readers who would rather not hunt for small markers, and it means the content still makes sense to search engines, to screen readers, and to anyone who opens the file with scripts disabled.