Create H5P Image Hotspots
What are Image Hotspots?
A H5P Image Hotspot (also referred to as an interactive image) is an interactive infographic. A hotspot is a clickable area on an image that expands to reveal more information. This information can be text, image, audio, video, weblink, or a combination. This article explains how a H5P hotspot can be created and examples of where they can be used.
What can Image Hotspots be used for?
Hotspots can provide clarity and explain the details in an image, allowing students to unpack concepts, and encourage exploration. Hotspots can be used with diagrams, maps and photographs of objects or scenes. Students can explore the information or be directed to other resources using web links.
Example: English Education - Assessment principles in English education
The following H5P image hotspot was used to provide additional information about different assessment techniques. Students start with the bigger picture of the topic and then unpack each technique helping them to contextualise and link the information to other concepts. Initially, an overview of the techniques is presented. Clicking on a hotspot reveals more information; a text paragraph, some brief dot points, followed by an external link to more detailed information. In this way, the hotspot allows students to process the information in 'chunks' and at their own pace.
Example: Southern Cross University Locations
The following H5P is used in a Welcome to SCU module for academics who are new to teaching at Southern Cross University. The H5P provides an overview of the main campus locations using a map of Australia. Clicking on a hotspot displays images and text that showcase each location.
Copyright Notification
Click on the "Rights of use" button in the toolbar (bottom left) to see how the copyrighted images were cited in this interactive.
Example: Accounting for Managers - Simple example of a balance sheet
The following image hotspot was developed for an accounting unit to describe the different components of a basic balance sheet. Each component of the balance sheet includes a hot spot that provides relevant information. This hot spot supports students to better grasp the purpose of each balance sheet entry and focus on the parts they are struggling with.
Create Image Hotspots
Now it's your turn. Follow along with the following video which covers making an Image Hotspot using an image, including how to add copyright information.
Test it out!
Here is the H5P we made in the video above. Try out the interactive content!
Best practice recommendations
The following strategies will assist you in making the most out of an H5P Image Hotspot.
Do provide instructions for users
Provide instructions to users within your learning site on how to use the image hotspot, as well as the kind of information that is within the interactive. For example, the above virology example could be accompanied by prefacing text such as:
"Click on the information icon to show more information about each virus, including the family and a link for further reading"
Don't hide key concepts within a Hot spot
Avoid placing key concepts or important information inside Image Hotspots! Image Hotspots are best used to reiterate information and add additional context. Where important information is hidden inside an image hotspot, students scanning your unit may miss it entirely.
Do remember to check accessibility
It is important to consider the accessibility of the interaction so that all students will be able to get the most from the experience. Some key ways to ensure accessibility:
- Use high contrast: When adding a hotspot to an image, you can change the icon and colour. Make sure that the style you chose stands out from the background, so students can easily find the hotspots on the image.
- Use alternate image text: Ensure that the alternate image text communicates the information of the infographic equivalently so someone using a screen reader receives the same information.
Don't forget image attribution
If you are using an image that is not open source, ensure you credit the source. Image sources can be attributed using the H5P metadata. See Publishing H5P in Blackboard for how to add metadata to a H5P.
Copyright data from within the H5P will be available from the H5P taskbar as shown below. Clicking on "Rights of use" shows the copyright information.
For more about using images at Southern Cross University, see copyright.
Step-by-step tutorial
More information about creating an Image Hotspot H5P is Available here: H5P Image Hotspot Tutorial.
References
Guo, D., Zhang, S., Wright, K. L., & McTigue, E. M. (2020). Do You Get the Picture? A Meta-Analysis of the Effect of Graphics on Reading Comprehension. AERA Open. https://doi.org/10.1177/2332858420901696
Jaleniauskiene, E., & Kasperiuniene, J. (2022). Infographics in higher education: A scoping review. E-Learning and Digital Media. https://doi.org/10.1177/20427530221107774
Paivio, A. (1971). Imagery and verbal processes. Holt, Rinehart & Winston.