What are hotspots?

Hotspots allow you to add additional information to an image. Hotspots make it possible for learners to click on (in)visible places on an image, where a pop-up will appear.

In this pop-up you can place all kinds of different content, such as text, but also a link to a content part or another web page.


Required roles

Author


How do you add hotspots to an image?

1) Create a content part and add an image

To be able to add a hotspot to an image, first create a new content part (or a new question). Select the content type Image. Here you can upload a new image or select an image that already has been uploaded before to add to your content part.
You can of course also add an image to an existing content part.


2) Set up the hotspot(s).

After uploading or selecting the image, you see a button to the right of the image: . Click this button to add hotspots to your image.

a) Set the clickable area


Entire image
If you choose Entire image for Clickable area , the entire image is a hotspot. Wherever the learner clicks the image, the content of the hotspot will always be shown.

Hotspots
Choose Hotspots for Clickable area if you want to add the hotspot on a specific place in the image and/or if you want to add multiple hotspots to the image.

Click the button  and then click on the right spot in the image to add the hotspot.

If you want to add multiple hotspots, click the button again and again  to add a new hotspots.

b) Add content to the hotspot

If the entire image is a hotspot, you can directly add content for the hotspot.
If you choose individual hotspots in the image, click the blue button via the pop-up screen  to add content to the hotspot.

Tooltip location

In the pop up where you add content to the hotspot, you can also find a drop down menu for Tooltip location. This setting determines where the hotspot information is shown.

  • Below hotspot
    The content of the hotspot is shown below the hotspot:
  • Above hotspot
    The content of the hotspot is shown above the hotspot:

  • Left of hotspot
    The content of the hotspot is shown left of the hotspot: 
  • Right of hotspot
    The content of the hotspot is shown right of the hotspot:
  • Popup
    The content of the hotspot is shown in a pop-up. If you choose this setting, you can also link a content part to the hotspot (instead of using the texteditor).

  • Link
    Here you can only add a link to a web page. When the learner clicks the hotspot, the link to the webpage will open (in a new tab).

c) Set the visibility of the hotspot

In the drop-down menu under Hotspot visibility you set the visibility of the hotspot. The following options can be chosen here:

  • Always hidden
    The hotspots are always hidden in the image.

A disadvantage of this might be that the learner doesn't know where to click in the image to make content of the hotspot visible.

  • Mouse-over hotspot
    The hotspot only becomes visible when the learner moves the mouse over the exact location of the hotspot in the image.

  • Mouse-over image
    The hotspot becomes visible when the learner moves the mouse over the image.

  • Always visible
    The hotspot is always visible in the image.

It is not possible to change the color, shape and size of the hotspot and tooltip.