Adding hotspots to an image using H5P

Tags Moodle h5p

The H5P plugin is an easy way to add visually appealing, and easy to use content on Moodle. Image hotspots allow you to add points on an image or diagram, allowing the user to hover over content. For more examples, go to https://h5p.org/image-hotspots 

1. Go to the Moodle course you would like to edit and click "Turn editing on" by clicking on the gear at the top right of the page.


2. Under the topic where you would like to add H5P, click "Add an activity or resource". 


3. A new window will open. Scroll down and choose "Interactive content" and then click "add". 


4. A new page will load and now you can choose which H5P feature you would like to use. 

If the H5P feature is not available, simply click the white and blue button on the right called "Get". A new page will load. Click "Install". Once the content has successfully downloaded, click "Use"


5.  Add a title to your image hotspot, the background image, and choose the colour of the hotspots.

 


6. Next, add hotspots to the background image. Click on the image and choose where you would like the hotspot to appear. Add an optional header. Add the pop up content. Pop up content can be text, video, or an image. 


7. To add another hotspot on the same image, click the "Add hotspot" button. 


8. When you have added all relevant hotspots, scroll down and click "Save and Display". 

 

Details

Article ID: 71765
Created
Mon 2/11/19 11:13 AM
Modified
Wed 7/24/19 12:23 PM