Interactive image glossary

Interactive image

A photo, diagram, floor plan, or illustrated map with clickable points on top of it. Clicking a point opens a card containing a title, description, optional media, and a link.

Hotspot

One clickable point on an image, made up of a position, a marker style, and the content that opens when a visitor clicks or taps it.

Image map

The classic HTML pattern where an image references a <map> element containing <area> shapes with pixel coordinates, turning parts of the picture into links.

<area> coordinates

The numbers inside an <area> tag that define its clickable shape: two values plus a radius for a circle, four values for a rectangle, and a list of points for a polygon. They are absolute pixels measured against the image's natural size.

Percentage positioning

Storing a point as a share of the image's width and height rather than as pixels, so 50% stays at the middle whether the image renders at 1200 or 390 pixels wide. This is what keeps hotspots aligned on phones.

Responsive image map

An image map whose clickable regions scale with the image instead of staying pinned to fixed pixels — in practice, one built from percentage-positioned elements rather than raw <area> coordinates.

Marker

The visible indicator drawn at a hotspot's position: a dot, pin, number, or icon. Legacy image maps have no markers, which is why visitors often cannot tell what is clickable.

Hotspot card

The small panel that opens from a hotspot, holding a title, description, optional photo or video, and a call-to-action link.

Lightbox

An overlay that expands media above the page, dimming everything behind it. Useful when a hotspot's photo or video needs more room than a card gives it.

Iframe embed

A single HTML element that displays a hosted page inside your own page. Interactive images ship as one iframe, so the interactive behaviour stays isolated from your site's code and styles.

Aspect ratio

The relationship between an image's width and height. An embed that declares its aspect ratio reserves the right amount of space before loading, which prevents the page from jumping.

Shoppable image

A lifestyle or lookbook photo whose hotspots point at products, so a visitor can go from the picture to a product page or straight to the cart.

Interactive floor plan

A floor plan image with a hotspot per room, unit, desk, or zone, each holding photos, details, and a booking or listing link.

Seating chart

A venue layout image whose hotspots represent sections or tiers, typically linking each one to ticket availability or pricing.

Product diagram

A render, exploded view, or technical drawing annotated with hotspots that identify parts, specifications, or replacement components.

Category filter

A control that shows only hotspots belonging to a chosen group, used to keep dense images readable — electrical versus mechanical parts, for example.

Clickable region

An area of an image that responds to a click. Regions can be invisible shapes, as in an image map, or visible markers, as in an interactive image.

clip-path

A CSS property that trims an element to a shape. With percentage-based polygon points it can make an irregular region clickable and responsive without any <area> tags.

SVG hotspot

A clickable path inside an inline SVG. SVG coordinates scale with the viewBox, so irregular shapes stay accurate at any size — the most precise hand-coded option.

White-label embed

An embed with no provider branding on it. On Interactive Image, free embeds carry a small credit and Pro embeds are white-label.

For worked examples of these ideas, see the answers page.