Add image hotspots to a course

The image hotspots block lets you place clickable markers on an image. Learners tap a marker to reveal a short label and a longer explanation — ideal for labelling diagrams, equipment, maps, floor plans, or anatomy.

Adding the block

In the editor, choose Add block, then Image hotspots under Interactive. Pick an image from your media library, by URL, or from the stock library.

Placing markers

Click anywhere on the image to drop a numbered marker. Drag a marker to reposition it — markers stay in place relative to the image at any screen size. You can add up to twelve markers per image.

Select a marker (click it, or click its row in the list below the image) to edit its details: a short label, a one-line tooltip, and an optional longer body explanation. Use the trash icon to remove a marker.

What learners see

In the published course, learners click or tap a marker to open a panel beneath the image showing that marker's information. Only one marker is open at a time, and tapping the marker again closes it.

Where it works

Image hotspots work in the course preview and in both SCORM and HTML exports, so the interaction is preserved wherever your course is hosted.