H5P: Making Pictures Interactive with Image Hotspots

This support page describes how to use "Image Hotspots" to make images interactive.


Instructions 

1) Make sure editing is on for the class. Click 'Add an activity or resource.' on your chosen section.







2) Choose H5P.

3) Use the search tool to look up 'Image Hotspots' then click the area highlighted in the image on the right by a red box.

4) At this point you can give the activity a title and choose the background image and the colour of the hotspots:

5) You can now click anywhere on the thumbnail version of the background image where you would like your hotspot to be. Once you've done this fill out the header and content you'd like in the hotspot. See below for the content types.

Text

To add text, select "Text" from the dropdown menu which will allow you to insert a title and the text you'd like.

Video

To add video, select "Video" from the dropdown menu. This will give you a box you now must click on to either upload a video from your PC or paste a YouTube link.

Image

To add an image select "Image" from the dropdown box. Click "Add" to add the image.

6) To continue to add hotspots click "Add hotspot" and repeat the process

7) When you are happy with your content click "Save and return to class" or "Save and display"