H5P Guides

Image Hotspots Tutorial

The Image hotspots content type allows you to place to place an overlay of hotspots on images and graphics. The user presses the hotspots to reveal an associated text.

In this tutorial you will learn:

  • When to use Image hotspots
  • How to create Image hotspots

Video Tutorial

Example

Here's the Image hotspots we'll create in this tutorial:

When to use Image hotspots

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. 

Prerequisites

Make sure H5P is up and running

If this is the first time you are using H5P, you should start off by reading this guide to ensure you are up and running with H5P on your platform. 

Alternatively, you can test drive H5P right here on h5p.org and skip to step 1.

Make sure your platform can create Image hotspots

Navigate to the menu that enables you to create new content. In Drupal, you select Interactive content. In WordPress you press Add new under H5P Content in the admin menu. In WordPress you select H5P Content and Add new from the admin menu. Select the Create option for H5P. If you find Image hotspots in the list of Content types, skip to Step 1.

If you can’t find the Image hotspots content type in the list:

  1. Download the .h5p file you can find here
  2. Select the Upload option when creating a new H5P
  3. Upload the file from step 1
  4. Save the node/article

You will now find Image hotspots in the Content type list when creating a new H5P.

Step 1: Topic

We'll use an image found on Wikimedia Commons of various berries as the background image for our Image hotspots. 

There are three berry types in the image, so we'll add four hotspots:

  • Strawberries
  • Blueberries
  • Blackberries
  • Raspberries

Step 2: Creating Image hotspots

Head over to where you usually create new content on your platform. In Drupal you go to Create content and select Interactive contentIn WordPress you select H5P Content and Add new from the admin menu. Then select the Create option for H5P and choose Image hotspots from the list of Content types

Step 3: Image hotspots editor

The Image hotspots editor should now appear. The top part of the editor looks like this:

Step 4: Background image

Have two things in mind when selecting a background image:

  • The image will be scaled (proportionally) to fit the max width of the container in which it is placed. 
  • It is possible to view the Image hotspots in fullscreen.

Therefore, choose an image with a suitable resolution.

We'll use the full resolution image found here

Remember to add any license or copyright information associated with the background image you use.

Step 5: Color 

This is the background color for the hotspots. 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. 

We'll use black, which has the hex code 000000 and will produce this final result:

Step 6: Creating a hotspot

Each hotspot has the following attributes:

  • Header
  • Text
  • Horizontal position
  • Vertical position

You can add as many hotspots as you like, as long as there are enough space to fit them all on your image.

The Header and the Text of a hotspot will be revelaed when the user presses the hotspot button.

The Header is the title of the hotspot. The Text is the full description. You can add as much text as you like. Scrollbars will appear if the amount of text cannot be viewed within the image.

The Horizontal position and Vertical position are specified in percent, from the left and from the top of the image respectively. 

We'll use Strawberries as the Header for our first hotspot, and the following Text:

Strawberries are the only fruit with their seeds on the outside, and are said to be immunity-boosting. 

It usually takes a few turns of trial and error to get the position right. You can always press Save to view the result before going back to the editor in order to change the position values.

Insert 54 for the Horizontal position and 55 for the Vertical position on the Strawberries hotspot. This will place the hotspot approximately in the center of the image. 

Step 7: Finishing up

Press the Add hotspot button to add the three other hotspots in a similar manner as above. 

Save the node/article to view your finished Image hotspots. 

Feel free to leave any comments or suggestions on how to improve this tutorial.