Add and position hotspots

Follow these steps

1. 1

   Create a marker

   PropertiesHotspot labels

   Select an image and use Add Label in Hotspot labels. A new marker starts in the center. For a standalone marker, use an Elements > Interaction preset.

2. 2

   Position the point

   PropertiesHotspot labels

   Set X and Y positions as percentages to align the marker with its subject. After reframing or resizing the image, check that the point still indicates the intended detail.

3. 3

   Style the marker

   PropertiesHotspot labels

   Choose size, color, circle/square style, icon, and pulse animation. Enter a title and short description. Choosing an icon does not configure its associated content.

4. 4

   Attach content and tooltip

   PropertiesContent type

   Select a content type and fill in its fields. The optional tooltip label is a short hint; toggle its visibility after entering text. The opened card’s title and content are configured separately.

5. 5

   Check removal and accessibility

   PropertiesSource image

   Remove unwanted markers without deleting the source image. In accessible authoring, describe the source and meaningful images opened by its markers. Test opening and closing each marker in preview.

Related lessons

• Interactive blocks
• Configure hotspot content
• Add buttons and links