H5P Interactives

Create simple, fun and interactive online learning activities.

Using the H5P Image Hotspot Tool

This guide uses a H5P object. For getting started on placing H5P into a space, please see Inserting H5P in VU Collaborate.

The H5P Image Hotspot Tool creates an image based test where the student is required to find the correct spot on an image. Hotspots can reveal text, images and videos when clicked.

Image hotspots can be useful for creating infographics fast and simple. Use any image and enrich it with points of interest and in-depth information about the details depicted. The student interacts with the image to get more information about a particular topic and engage with it in a visually ordered way. H5P.org also offer their own tutorial on this object.

Below are the steps for using the H5P image hotspot tool:

 

Step One: Create a New Image Hotspot Object


1. In the Learning Space choose the module you want the H5P to be in, click on New then New Document.

 

new new documentv1

 

2. Click the Insert Stuff button.

 

insert stuff

 

3. Click H5P Learning Object.

 

H5P learning Object

 

3. Click Add Content.

 

add content

  

5. From the Content Type dropdown menu, select Image Hotspot.

 

image hotspots

Note: If you click on the details of the object type, a summary of the tool and an option for a demonstration will appear. If satisfied with your tool selection, click Use. If you do not require this step, click on the title of the H5P content you wish to use.

 use

 

 

Step Two: Add Hotspots and Media


1. Write the title in the Title field.

 

title hotspots

 

2. Under Background image, click the green plus icon icon01 greenplus to choose the image that you will place hotspots on for this interactive. For example, this could be a model from your course content.

 

background image section with green plus icon highlighted

 

2. Click the Hotspot colour dropdown to open a colour picker. This determines what colour the hotspots (appearing as small icons) will be. When you've found a colour you're happy with, click Choose.

 

Hotspot colour section underneath background image with the colour picker open, choose button in the bottom right-hand corner highlighted

 

If you select black, for example, the hotspot will appear like this hotspot icon in black on a red background. Remember to choose a colour that will be clearly visible against your background image.

 

3. Now that your image is in place, we can start creating hotspots. Click anywhere on the image preview to place a hotspot.

 

the hotspot position picker with a sample background image of red, blue and black berries added behind it. The hotspot appears as a small green dot

 

4. The Cover entire background image tickbox appears in each hotspot and is unchecked by default. If you are adding a video or image (see 2.1 Adding a Video to a Hotspot and 2.2 Adding an Image to a Hotspot) you may want to tick this so that students can see or focus on your content better. Leave it unchecked to generate a smaller popup for this hotspot's content.

 

underneath the hotspot position area, the cover entire background image option is highlighted but not ticked

 

5. Enter a Header for the popup. This is the title of your content, and optional - though helpful for adding extra context where needed.

 

the optional header field highlighted with no text entered

 

6. Click the Content menu and select the content type you want to add to the hotspot from the dropdown. There are three content types you can add to a hotspot: Text, a Video or an Image. For the purposes of this guide, we're going to start with Text.

 

the content dropdown in the popup content section, with text selected

 

7. Enter your Text in the text field that will appear when the student clicks the hotspot. Try to keep it short - 3-4 sentences is best - so that the popup won't take over the screen.

8. When you're finished with your text item, click Add hotspot to add another hotspot.

 

the highlighted add hotspot button as it appears underneath the hotspot editor

Note: You will have to enter a new hotspot position and header each time (steps 3-6) you add a hotspot.

2.1 Adding a Video to a Hotspot

You can add a video to a hotspot by uploading it from your computer or adding a link to a video hosting site.

 

1. Click the Content menu and select Video from the list and write the title of the video.

 

video

 

2. Click the plus sign in a dashed rectangle border to add your video.

 

video sources

 

3. A pop-up window will appear where you can choose to upload a video file or enter a link to the video you want to include. When you have added the right video, click Insert.

insert

 

4. Under the Visuals tab, you can choose to upload a Poster image for your video. This is a static image that will display if the video is not playing. Click the green plus icon green plus icon to browse for a poster image on your computer. The poster image is optional, and will not work if you have your video set to autoplay.

 

The poster image section with a green plus icon highlighted

 

5. Below the poster image upload area, you can choose whether to fit the video to the space (this will resize the video to fit if you have Cover entire background image ticked for this hotspot), and show or hide video player controls (play, pause, and navigate) in the video. These are ticked by default, and it is recommended you leave these options ticked if you're not sure.

  • If you untick Fit video player to use all available space, the video will retain its original size and aspect ratio.
  • If you untick Show video player controls, the student won't be able to pause or rewind the video.

 

The two checkboxes described above - fit video player to use all space and show video player controls - highlighted and both boxes checked by default

 

6. Under the Playback tab, you can choose whether the video automatically plays when the hotspot is clicked, or choose to loop the video. Both options are unticked by default.

  • Tick the box next to Auto-play video to play the video as soon as it opens.

Note: if you leave the auto-play option unticked and also disable video player controls, the video will not play.

  • Tick the box next to Loop video to make the video automatically replay when it finishes.

 

the playback section with two options described highlighted, neither ticked by default

 

Once you've configured your video, it's ready to go. Don't forget to add your copyright if the video is yours, or an attribution if it's from an external source.

 

2.2 Adding an Image to a Hotspot

You can add an image to a hotspot by uploading it from your computer.

 

1. Click the Content menu and select Image from the list.

 

The content dropdown menu with image selected

 

2. Click the green plus icon green plus icon to browse for and upload your image.

 

the content item area with the green plus icon under image highlighted

 

3. Enter some Alternative text for your image. This will help students using text-to-voice software understand what the image depicts.

 

the alternative text field highlighted underneath a sample image of half a strawberry

 

4. You can choose to enter some Hover text to add extra context, but this is optional. (Hover text may not work on mobile devices).

5. You can click the Add item button to insert another content type into any hotspot.

 

The hover text section with some sample text entered, and below that the add item button is highlighted

 

At the bottom of the screen you can adjust your H5P's settings (you can leave these settings by default or make alterations):

1 - Display options: (previously 'Display and copyright buttons') What options do you want to be visible for the user, for example you can tick the display download button to enable students/staff to download the H5P to their own computer. You can also tick the Display embed button, which allows the user to embed the H5P into their HTML editor in VU Collaborate for example.

2 - Folder: (previously 'My Content') All your content will be saved in one spot, within a root folder.

3 - Publish: This option allows you to make the H5P Unpublished (content can not be inserted into VUC), Protected (content can be inserted into VUC) or Public (visible to the public using a content link and the content can be inserted into LMS and be embedded). Protected is the default setting and it is recommended to leave this setting as it is. 

4 - Collaborators: (previously 'Authors') In this setting you can add and search for other collaborators and give them access to edit your H5P's. For example, if you are teaching a unit with another staff member and you would like them to have access to edit your H5P's, then you can use the search field to locate another staff member by typing in their full name. 

5 - Sharing: (previously called 'Select value') This is where you share your H5P with others, so they can view and clone your content. There is a folder allocated for each college, for example 'Arts and Education', select your College.

Note: To know more about Sharing and Collaborators, please see H5P Sharing and Collaboration.

6 - Send Score to LMS: (previously 'Send to Gradebook') In this section you can link your H5P directly to VU Collaborate and also link it to your gradebook. It is recommended to leave this setting as it is, and NOT send the results to the gradebook.

 

title new h5p

 

After adjusting your H5P object, you can click Save and Insert or Save.

 

save and insert

 

Step Three: Preview and Publish Image Hotspot


Before the object gets inserted into the space, preview it for any possible errors. You can check your settings and elements for broken links or inappropriate sizing before you share the object in your space.


1. In the main H5P object menu, click Insert to open a preview of your new object.

 

insert into HTML editor

 

2. Click around in your new object to see how students can interact with it, and check videos are working correctly. The hotspots will appear as small plus signs inside a circle of the colour you chose earlier. Finally click Insert.

 

preview hotspot

 


Further Support

Visit the VU Collaborate Help site at https://vucollaboratehelp.vu.edu.au for up to date information and resources on blended learning or email This email address is being protected from spambots. You need JavaScript enabled to view it..

Contact ITS Service Desk on (03) 9919 2777 or via self-service http://servicedesk.vu.edu.au for further technical support.