Find more information about Image Hotspots at

What is Image Hotspots

The Image hotspots content type allows you to place an overlay of hotspots on images and graphics. The user presses the hotspots to reveal an associated text.

Image Hotspots Examples

Video and Text              Text and Image          Anatomy of a Compound Leaf          


Get started

1. Log into your Moodle course, select Menu, Site pages, Content bank

2. Click the Add button

3. Type the Title of the Image Hotspot and select optional Metadata.

4. Add a Background image (located on your device) and add Alternative text for the image.

5. Choose your Hotspot icon and color.

6. Add the first hotspot. Click on the area of the background image where the hotspot will be placed.  Decide if the hotspot popup will cover the entire background image and if an optional header will be displayed.

7. In the Popup content section, add the type(s) of content to be displayed when the hotspot is selected.  Note:  Multiple content types can be displayed per hotspot.

8. Add Item (additional content) to the Hotspot or add another Hotspot.  Continue until the Hotspots are complete.  

9. Optional:  Text overrides and translations

10. Save when complete to preview.  The Image Hotspot content will live in the Content Bank until it is added into the Moodle course.

Return to H5P Content Tutorials