Image Hotspots

About image hotspots

Image Hotspots makes it possible to create an image with interactive hotspots. When the user presses a hotspot, a popup containing a header and text or video is displayed. Using the H5P editor, you may add as many hotspots as you like. The following is configurable:

  • The number of hotspots
  • The placement of each hotspot, and the associated popup content
  • The color of the hotspot to ensure there is enough contrast for it to stand out in the image

Use case 

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 user is activated by interacting with the image. 

Example 

Create Image Hotspots H5P interactive content 

Creating new H5P content is a multi-step process. H5P activities are managed through a Content Bank – an area where H5P content may be created, edited and stored. Once an activity has been created in the content bank, it can be added to your course and the activity settings can be configured as needed. 

  1. Open the CLE (cle.ucsf.edu) 
  2. Go to the CLE course where you would like to add the activity and turn editing on. 
  3. Navigate to the content bank in your course to create interactive content and visit the H5P image hotspot tutorial to learn how image hotspots work.    
  4. Once your activity has been created, navigate to the section where the activity should be located. 
  5. Click add an activity or resource to add an H5P activity to your course. 
You can combine H5P content into other activities or resources in the CLE such as a Page, Lesson, or Book. Review Embed H5P into other activities in the CLE for more information and instructions.

 

Have more questions? Contact us