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 Insert Stuff menu, click to open the H5P Learning Object.

the insert stuff menu with h5p learning object highlighted

2. In the H5P tool, click Create new Learning Object.

The create new learning object button highlighted

3. Add a Title that will be easy to remember and find.

Add Title Step 1 3

4. Using the dropdown menu, set your Content Type to Image Hotspot.

Content Type Step 1 4

Note: If you click on the name 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 Use from the content type menu.

Summary Demo Step 1 3

5. Select your relevant College and enter Discipline/Area and  in the fields provided.

6. Write a Description for your activity, to provide context for the object if you're sharing it with other staff.

the description field with a red ellipsis indicating where text should go

 

Step Two: Add Hotspots and Media


1. 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.

the text area with some sample text about strawberries entered.

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.

the content dropdown menu with video highlighted

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

the video sources section with the grey box to add a video highlighted

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

the insert video pop-up with the insert button in the bottom right-hand corner highlighted

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

6. The H5P options that appear at the bottom of the screen determine the accessibility of the tool. Set your preferences before you Save.

Select Shared to enable other staff to copy this learning object to use in their spaces.

Select Send Grades to VU Collaborate if you have a grade item enabled and would like the marks to be sent straight through to a connected gradebook.

Display action buttons will allow users to navigate via the action bar.

Download button enables users to download the learning tool.

Embed button enables users to embed your learning tool elsewhere.

Copyright button will assign your copyright to this tool.

7.Once you're finished adding all of your hotspots, click Save to finish creating the object.

Options at bottom Step 2 9

Step Three: Preview and Publish Image Hotspot


Before the object gets inserted into the space, previewing it for any possible errors is a good idea. 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.

the new object in the main h5p menu with the insert button on the far right highlighted

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.

A preview of the object with the image of berries featuring several purple hotspots. One is highlighted and has been clicked to reveal the sample text about strawberries added in step two

3. If you want to reset all elements click Refresh Preview to start again.

the refresh preview button at the top of the preview page highlighted

4. Once you've finished checking all of your elements work correctly, click Insert to add the question to the document (or other embeddable area) you are working on. If there's something you need to change, click Back to return to the main H5P menu where you can Clone, Edit or Delete the object.

 


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.