Layouts, triggers, and markers
Where hotspot content appears and how visitors find it.
Three choices shape how an interactive image behaves: where content appears (layout), what opens it (trigger), and how visitors spot the clickable areas (markers and the legend).
Layouts
Six layouts place the information box left, right, top, or bottom of the image, in a lightbox, or as a tooltip at the hotspot itself. Set the layout on the image, and override it per placement with the layout shortcode attribute or the matching block option.
Triggers
Hotspots open on click or on hover. Click is the safer default: it works the same on touch screens, where hover does not exist. Both triggers work with the keyboard and announce panel changes to screen readers.
Markers
A marker puts a visible sign on each hotspot: a dot, a number, a pin, or the pulsing product tag dot that shopping apps use. Marker color and size are adjustable. There is also an always-visible mode that keeps every hotspot highlighted at rest.
The legend
The legend lists every hotspot below, left, or right of the image. Entries highlight as hotspots open, and when markers are set to numbers the legend numbers match. Opening a hotspot from the legend adds a browser history entry, so Back steps through the hotspots a visitor has opened and the address stays shareable. Set the legend style to products and it becomes a shop-this-image strip.