Explore an image with hotspots

Use Image hotspots when the position of something matters: parts of a diagram, steps on a map, or details in a workspace. Each point has a label and an explanation. Exploration is ungraded and never blocks the next page.

Add the image and points

1. Choose Insert block, then Image hotspots.
2. Select the block and open Edit properties. Use Upload hotspot image, choose an existing image, or enter a complete https:// Image address (URL).
3. Add meaningful Alt text, a Title, and an optional Caption.
4. Use Add hotspot to add points, up to 12. Give each point a short, descriptive Label.
5. Select a marker on the canvas, then click the image to position it. Arrow keys also move the selected marker; Horizontal (%) and Vertical (%) provide precise placement.
6. Edit each point’s explanation on the canvas. Open Preview to try the activity.

The inspector configures hotspot descriptions and image details. Fictional workshop content. Full-resolution PNG

The whole image remains visible as its size changes, so markers stay aligned. Keep important information in the descriptions as well as the image.

Choose how descriptions open

In Description presentation, choose Below image for explanations beneath the image, or Floating card for a card near the active marker. Existing hotspots keep their current presentation until you change it.

With floating cards, learners hover over or focus a point to read it. Selecting a point keeps its card open; Escape dismisses it. Text labels provide another way to select points, and Show all descriptions exposes the explanations together.

A hotspot explanation opens over the image. Fictional workshop content. Full-resolution PNG

Why is the card below the image?

Floating cards need room. When the displayed image is narrower than 600 pixels or shorter than 300 pixels, descriptions appear below it instead. This also applies to small images on a desktop. Try a wider block layout or a taller source image if an overlay is important to the design. Check the actual result in Preview.

A hotspot explanation opens below the image on a phone. Fictional workshop content. Full-resolution PNG

Check the experience

Try every point with the pointer and keyboard, then check a phone-sized preview. Labels and explanations should make sense without relying on marker color or animation. Avoid placing points so close together that they are difficult to select.