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
Click "Get started" button to explore all possible ways for using H5P
Example
Here is the Image hotspots content 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.
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
Select the New content option 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: Icons and Color
Next, there are Hotspot icon and Hotspot color option:
You can choose from the list of Predefined icons or upload your custom icon:
Hotspot color is the background color for the hotspots. You can set a background color for any predefined icon. 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
- Hotspot position
- Popup content
You can add as many hotspots as you like, as long as there is enough space to fit them all into your image.
The Header is the title of the hotspot and it will be revealed when the user presses the hotspot button.
Click anywhere on the image where you want to set a hotspot. The green circle will appear to indicate the position of a new hotspot. Hotspot can be repositioned by clicking again on a different place on the image.
Popup content can be either:
- Text
- Video or
- Image
Popup is used to describe the selected hotspot. Hotspot can be described by using a text, a video or an image. You can add as much text as you like. Scrollbars will appear if the amount of text cannot be viewed within the image.
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.
Step 7: Finishing up
Press the Add hotspot button to add the three other hotspots in a similar manner as above.
Save the node to view your finished Image Hotspots.
You should now have the same result as the example on top of the page.
Feel free to leave any comments or suggestions on how to improve this tutorial.
Comments
andiwatt
Sat, 12/01/2018 - 22:25
Permalink
image
It seemed to be a bug? I downloaded an old file you posted (somewhere I can't find it back), uploaded it and it works now!
BV52
Mon, 12/03/2018 - 02:48
Permalink
Hi andiwatt,There is a
Hi andiwatt,
There is a possibility that when you downloaded the libraries for the image hotspot it did not include all the files (not your fault). So downloading the sample content from H5P.org brings all the necesarry files with it.
-BV52
andiwatt
Mon, 12/03/2018 - 09:45
Permalink
images
Hey BV52,
Thank you so much for your reply :)
Really appreciate the work you guys provide.
I did download the files directly from the tutorial page but it still didn't work.
I sifted through the old forum posts and found somebody with the same problem. Somebody of the h5p crew posted a h5p file which had the image function within. It worked fine.
So it work now :) Only problem I have now is that the hotspots on the mobile phone are too big and overcrowed eachother. Bigger than on a computer screen...
andiwatt
Sat, 12/01/2018 - 22:31
Permalink
Mobile
Hey thank you for this great plugin. I have a question about the hot spot markers. They look great on a big screen, but are a little too big on a mobile phone. Is there a way to get them smaller or is it a take it or leave it situation? Thank you in advance!
BV52
Mon, 12/03/2018 - 03:00
Permalink
Hi andiwatt,It is not really
Hi andiwatt,
It is not really a take it or leave situation :-). Since H5P is open source there are several things that you can do to make changes to the content. I this case you can
use a PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for more details. You can also post a request in the Feature Request forum.
-BV52
andiwatt
Mon, 12/03/2018 - 09:48
Permalink
mobile
Oh...Im just a humble visual web designer. I know a thing or 2 about coding but this is too complicated....
I'll go to the request form :P
Symbolic
Tue, 12/04/2018 - 13:26
Permalink
Awesome addon, i love it as it adds alot to moodle
However i'm having a little bit of issues with placing the Hotspots. The Hotspot position image (when adding hotspots) is too small, which means i can't place the button accurate enough. This leads to it being all over the place. Is there away around this? what am i doing wrong?
BV52
Wed, 12/05/2018 - 09:09
Permalink
Hi Symbolic,You are correct
Hi Symbolic,
You are correct with your observation that the image maybe a bit small specially if precision is necesarry for the activity. I suggest to post a request in the Feature Request forum to have a larger image while editing.
-BV52
Pasupathi Ganesan
Tue, 02/12/2019 - 11:35
Permalink
Text format with more options
Is it possible to add more format options to text type in Popup content Items? Including image upload option. Something similar to CK editor?
My requirement is on clicking hotspot, multiple contents are getting showed (Title, Description, one CTA, Main image, and a closeup image). I want to arrange these contents in a different manner whereas its all listing one by one now.
Please let me know how should I achieve this.
BV52
Wed, 02/13/2019 - 04:00
Permalink
Hi Pasupathi,There are 2 ways
Hi Pasupathi,
There are 2 ways to make these changes.
1. Make the changes yourself or if you know someone who has developer experience. You can look into these documentations for more details in making changes to the contents.
2. Create a feature request, in order for your feature request to attract as much interest as possible make sure it follows the below guidelines:
It is clear from every perspective how the feature will work. We recommend describing the feature with one or more user stories, for instance “As an author I want it to be possible to pick between different effects for the check answer animation so that the learners will see a variety of effects and also I can adapt the effects to my target audience(I’ll be using pink unicorns which works really well for both my target audience which are 4 year old girls and venture capitalists)”
If the feature can be illustrated with images or videos it always helps
Make it clear what content types this is relevant for, and or if this is a new content type
Make sure you post the feature in the Feature Request forum.
-BV52
Cynthia Lau
Mon, 06/24/2019 - 03:10
Permalink
Hi. I have just started using
Hi. I have just started using H5P and used it to create an interactive infographic using the Image Hotspot. I noticed that there is a lot of text after the H5P object especially on the mobile device. Is there any way I can get rid of the extra space. Is there any way we can work around this.? My graphic was originally 800 x 2000px but got increased to 1091 px and 2070 px upon embedding
BV52
Mon, 06/24/2019 - 05:57
Permalink
Hi Cynthia,The easiest way is
Hi Cynthia,
The easiest way is to use a PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for more details.
-BV52
sandewhira
Tue, 09/03/2019 - 10:16
Permalink
can not change color of hotspot
I can not change the color of the hotspot. It stays white. Any idea what the cause might be?
BV52
Tue, 09/03/2019 - 19:18
Permalink
Hi sandewhira,Would you mind
Hi sandewhira,
Would you mind checking if you hav any errors in the browser console?
-BV52
sandewhira
Thu, 09/12/2019 - 17:26
Permalink
hotspot color
Thanks BV52 for reacting. I dont see any errors. The color is set on blue, but when I view the hotspot it is white.
BV52
Fri, 09/13/2019 - 18:43
Permalink
Hi sandewhira,Would you mind
Hi sandewhira,
Would you mind posting a separate thread here and please provide the information that is requested.
-BV52
[email protected]
Mon, 09/23/2019 - 14:54
Permalink
Images
When adding an image on the hotspot its 100% in width according to the surrounding div, so no matter how small the image is its always as wide as the container. It makes some ugly images sometimes.
Will there be an option to set the image size?
BV52
Fri, 09/27/2019 - 04:37
Permalink
Hi,There are no planned
Hi,
There are no planned changes from the core team but it is worth creating a Feature Request.
-BV52
Pages