1. From the edit page view, click Add a Block then click Add Block.
    Screenshot showing page in edit mode. Arrows are pointing to the "Add a block" area of the page and the Add a block option in a modal.


  2. From the Add Block modal, select Image Hotspots.
    Screenshot of the Add a Block modal with an arrow pointing to the Image Hotspots block item.


Image Hotspot Block Editor


In the Image Hotspot editor, there are two tabs: Activity Settings and Add Item. Start with the Activity Settings Tab.

There are 5 settings in the Activity Settings:


  1. Title: Use the default title or add a custom title. This title will appear in the Overview and More Info tables.
  2. Image: Click the Select an Image field to launch the File Manager and choose an existing image or upload a new image.
  3. Alt Text: If the image you selected has Alt Text associated with it in the File Manager, that Alt Text will be brought into this field. If not, you will need to add Alt Text in the field. Describe the content and function of the image using as few words as possible. Alternative text is read by screen readers allowing the content and function of an image to be accessible to those with visual or certain cognitive disabilities. To learn more about alternative text visit http://webaim.org/techniques/alttext/. 
  4. Points: The Point field will only be displayed if the module is being graded. As a default, the point value is set to 0. You can change the point value if desired.
  5. Image Alignment: Use this to set the alignment of the Image Hotspots activity on the page. The options are None, Left, Center, and Right. The default is Center. 


Screenshot of the Image Hotspots editor.


Once an image has been added, the image will appear in the Preview pane. You can quickly resize the image using the Quick Resize button if desired.

Image hotspots editor with the Quick Resize menu open.


Adding hotspot items


Select the Add an Item tab to add a hotspot. You can move the hotspot item either by clicking and dragging, or you can select a hotspot item and move it with the arrow keys.

There are 4 item Settings:

  1. Label: Enter the label for the hotspot item.
  2. Icon: select the icon style to be used for the icon.
  3. Content: Enter the content to be used for the hotspot item. Content can include lists, links, equations and some HTML.
  4. Audio: If desired, audio can be added inside the hotspot item. Select from existing audio or upload a new audio file.

Image hotspots editor with 'Add an Item' tab selected, showing item settings.


When you are finished with the hotspot item select Save or Save and Add Another.


Item Placement in the Preview Pane


There are options in the Preview Pane to assist you with aligning your hotspot items on your image.

  1. Grid: Add a grid to your image to help align items
  2. Snap to Grid: Lock items into set places using the grid
  3. Grid Size: Adjust the size of the grid

Image hotspots editor with grid and grid settings selected in the preview pane.


Editing/Deleting Existing Items


To edit an existing item, select the item, then select the Edit pencil icon.

To delete an existing item, select the item, then select the Delete trash can icon.


Hotspot item selected showing the editing and trash icons.


When you are finished adding all hotspot items select the Add Block Button.



The new activity will now appear on the page in the edit page view. Select the Publish My Edits button to save the page. 
Note: A transcript is automatically generated to ensure the interactive activity is accessible to anyone using a screen reader.

Finished and saved Image hotspots block showing a diagram of the human heart and 13 hotspots

Once the changes are published and the edit page view has been exited, the content will display as it will appear to learners.Image hotspots block showing a diagram of the human heart with a hotspot modal open showing information for the Superior Vena Cava