Image Hotspot
Image hotspots makes it possible to create an image with interactive hotspots. When the learner presses on a hotspot, a popup containing a heading and text or video is displayed. You can add as many hotspots as you like. It is possible to configure the number of hotspots, the placement of each hotspot with the associated content and the colour of the hotspot.
Accessing H5P in Canvas
You can access H5P in Canvas through the Rich Content Editor (RCE), which is accessible via the edit view of Page, Assignment, Discussion Board, Announcement and Quiz questions.
For this example, we will be adding H5P onto a Canvas page. The first thing you will need to do is either open the page you want to embed the H5P content into or create a new page. Then click the ‘Edit’ button which will open the RCE. (You will automatically go into edit mode if you create a new page.)
Next, you will need to locate H5P in the RCE toolbar by clicking on the H5P icon.
Clicking on that menu item will open a pop-up showing your H5P library. From here, you will have the option to either insert previously created content or create something new.
Select the Add Content option. A search bar will appear.
Type Image Hotspot and select this from the list of options that appear.
Creating Image Hotspots
The Image hotspot editor should now appear. The top part of the editor looks like this:
Title
Add a title. This will not be visible to your learners but can be used for search, reports and copyright information.
Background Image
The next step is to add your image.
The image will be scaled to fit the maximum width of the container in which it is placed.
It is possible to view image hotspots in full screen.
Remember to add any license or copyright information associated with the background image you use.
Remember to add in alternative text to make your image accessible.
Icons and Colour
You can use a predefined icons which are depicted in purple below or you can upload your own customised icon.
Hotspot color is the background color for the hotspots.
You can set a background color for any predefined icon.
The color is specified in a hexadecimal format.
You can use this color picker to find the six-digit hex code for the color of your choice.
Adding a Hotspot
Click on Add Hotspot to create a hotspot. Select this for every hotspot you want to create. You can add as many hotspots as you like, as long as there is space to fit them on the image
To set the Hotspot position click the circular dot and move it to anywhere on the image. The green circle will appear to indicate the position of the hotspot. The hotspot can be repositioned by click on the green dot and moving it to a new part of the image.
The Header is the title of the hotspot and it will be revealed when the user presses the hotspot button.
You finally have to select your Popup content. Choose between audio, image, text and video.
For this example we will use the following
Header : Strawberries
Popup content: Choose Text: Add the following text
Strawberries are the only fruit with their seeds on the outside and are said to be immunity-boosting.
This is how the hotspot will look when the learner selects it.
Press the Add hotspot button to add more hotspots in a similar way.
Finishing Up
Choose Save & Insert to save your Image hotspot.
This is what a hotspot looks like when it is selected by the learner.