○ Add hotspots to an image
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.