A free HTML5 based content type allowing creatives to add hotspots to images. Hotspots may reveal texts, images and videos when clicked. All you need to create this content type is H5P.com or the H5P plugin in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress.
Would you like to create content like this on your own?Get started
Register on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.
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
Learn how to create Image hotspots in this tutorial.
The H5P content on this page is licensed under Creative Commons Attribution 4.0 International unless another Creative Commons license is specified under rights of use. The author of the content is Joubel
New to H5P? Read the installation guide to get H5P on your own site.
Mon, 10/20/2014 - 22:37
image hot spot
image hot spot
Sun, 12/07/2014 - 19:11
Sat, 12/13/2014 - 16:28
Beautiful, useful, great
Thank you so much! I'm a teacher and all the things you create are extremely helpful and they look nice)
Mon, 12/15/2014 - 22:33
Tue, 02/03/2015 - 19:22
H5P is responsibile ?
Wed, 02/04/2015 - 09:16
That is up to each content
Thu, 08/06/2015 - 13:04
Image Hotspot on html 5 page
I've one requirement to create one micro site (HTML5) which will have index page and that page will have one site image having number of hotspots and associated text appeard as a popup. I found this image hotspot is meeting my requirement but how to use in HTML5 page not sure...Coudl you please help me here. Finally this micro site will integrate with share point so I need to be deliver HTML5 pages at the end.
Wed, 08/12/2015 - 20:08
World map with small hotpots
I would like to use h5p for world map with hotpots showing information about national representative (I have a lot). I made a test but the size of the pot is big for me. So is it possible to reduce the size of the hotspots?
Thanks in advance
Wed, 11/18/2015 - 16:44
size of hotspot image
Hi there -
I want to use an image on a page with a hotspot that triggers a video. The h5p works perfectly with one issue. The background image is sized using the dimensions of the video, rather than being the default size of my image. Is there a way to get around that so the background and video can maintain their original sizes? Or should I perhaps use another content type?
Thu, 11/19/2015 - 14:52
I'm sorry, I didn't understand that one. By clicking on raspberries on the top of the page here I see a video, but the video has a different size than the background image?
Maybe you could provide a link?
Thu, 11/19/2015 - 17:06
size of hotspot image
I don't have any published piece yet. What I'm trying to do is this:
image on the page shows at about 150 x 150. When the user clicks the hotspot, the video opens at its native dimensions of 640 x 320. As it exists, when I create the object, it resizes my base image.
Fri, 11/20/2015 - 11:09
Ok, so the video is bigger
Fri, 12/04/2015 - 11:26
Fri, 12/04/2015 - 11:29
Try to use examples
Try to use examples
Tue, 02/23/2016 - 11:05
Hotspot Photo and Text
Is it possible to have an image and a text in the same Hotspot? I saw the Hover text but I need to be sure that my participants are reading the text. Do you have any idea?
Tue, 02/23/2016 - 11:42
Hello :) It isn't possible at
Fri, 08/10/2018 - 18:54
Is this new version available?
My library has an interactive map http://library2.up.edu/floormap/floormap_mainfloor.html which lets people view images and text as they mouse over different areas. I noticed that H5P allows video, text, OR image to appear in the pop-up triggered by selecting a hotspot, and you have said that in the next version it will be possible to combine text and image. Is that next version available?
Mon, 08/13/2018 - 06:03
Hi Heidi,Yes, you can now use
Yes, you can now use videos as the pop-ups.
Mon, 08/13/2018 - 18:41
I'm more interested in combining text and image
Thanks for your reply, but I wasn't interested in videos as the pop-ups; I want to be able to combine images and text, e.g. a picture with a caption, and preferably with the ability to include hyperlinks in the caption. Is that possible?
Tue, 08/14/2018 - 04:53
Hi Heidi,Sorry I think I got
Sorry I think I got confused there. Anyway this is not possible as of the moment. I think we did not push through with the plan of having a combined image-text as pop-up. Although I think this is a very good idea and a post in the Feature Request forum can help make this happen. 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.
Tue, 03/15/2016 - 16:42
image and text in pop up
Looking forward to the next version of this hotspot image H5P element. Hoping it will include an image in the hotspot pop up.
Wed, 03/16/2016 - 16:19
Yeah, it is very certain. I
Wed, 08/24/2016 - 02:45
New Feature Request
Love H5P and what you have done so far. We have recently been playing with the image hotspot and were wondering if we could submit some requests for new features. Below is a list:
These are just a couple of things we have thought of while using this.
Again love your work.
Wed, 08/24/2016 - 11:23
Hi,Thanks for your
Thanks for your suggestions. You should add the feature requests to https://github.com/h5p/h5p-image-hotspots/issues.
Tue, 08/30/2016 - 01:35
Thanks I will be sure to add them.
Sun, 09/04/2016 - 00:58
Hello, i have installed Image Hotspots on my site! I have the outcome that i wanted and i am very pleased with that, thank you for your work! I have only one question, is there a way to define the dimensions of the image when adding a content item: image ? Or a way to use the text content item and use html tags, so i can upload my image and define its dimensions this way ? - I am using drupal by the way -
Waiting for your answer, thank you for your work again!
Mon, 09/05/2016 - 09:58
Hi, Currently, that is not
Currently, that is not supported. the current implementation will use as much space for the image as possible. Could I ask you why you need this functionality? E.g does the images get too small or too big?
Mon, 09/05/2016 - 15:59
Hello, Thanks for your reply.
Thanks for your reply. I want to make a "image map" For example i have an image and i want when the user clicks on a section the pop-up to display some information and an image right next to the text. I know that i can add an image type and then and a text type above but the image was way too big. Anyway i edited the code and i changed it from 100% width and height to what i want and now it fits my standards. But think about adding this option maybe in the future, I think many people would like that :)
Tue, 09/06/2016 - 08:43
Thank you for your
Thank you for your explanation. Will keep it in the back of my head :)
Wed, 09/07/2016 - 09:00
Users and zoom?
- Is it possible for many users to ad hotspots? (and not only admins)
- Is it possible for the users to zoom at the image and ad hot-spots there?
Wed, 09/07/2016 - 10:15
1) Currently, only the author
1) Currently, only the author of the content may add hotspots. You should be able to create your own hotspots content without being an admin.
2) I see how this could be beneficial but currently, this isn't possible.
Tue, 10/25/2016 - 16:32
Transparent Image Background
Is it possible on the main image and displayed images to have a transparent background if I use a png?
Wed, 10/26/2016 - 10:00
Hi, you could create an
Hi, you could create an account and try here.
Wed, 10/26/2016 - 10:24
Transparent Image Background
I already have an account, but it still doesn't seem to have solved my problem!? Do I need to create a 'Transparent Image Background' account?
Wed, 10/26/2016 - 11:06
Hi Michael, could you please
Hi Michael, could you please explain how you would like the end result to look like and what results you are getting right now? If you could add a few screen shots, that would also be helpful.
Thu, 12/01/2016 - 08:39
full width element
Hello and thank you for this great plugin
I have a problem with it,i can't use it in full width style,i changed width attributes to 100% but there was no change in style
I'm using image hotspot module on wordpress.please help me with it.thanks
Thu, 12/01/2016 - 09:22
Hi,H5Ps are using 100% width
H5Ps are using 100% width by default, so my best guess is that your theme is setting some constraints on the width. If your Image Hotspot is publicly available, we could have a look :)
Thu, 12/01/2016 - 09:53
Thanks.my website is not
my website is not finished yet,so it's on coming soon page,but now i disable it for you to see that.i use enfold theme for my website,i tried this but it doesn't work for me.
Thu, 12/01/2016 - 11:07
There are several things in
There are several things in your CSS making the H5P not using 100% width. Here you go:
Thu, 12/01/2016 - 12:12
Thanks for your attention.now
Thanks for your attention.
now what's your suggestion for me to fix it?
Fri, 12/02/2016 - 08:17
Hi,This is a really out of
This is a really out of scope for this forum, but I'll make an exception (since I'm such a nice guy :). So: you will probably have to change or override the CSS on this page so .container uses 100% width and having padding:0 for left and right.
Tue, 12/13/2016 - 18:20
Alter the way the hotspots are intereacted with
I'm wondering if there is any way to alter the way the hotspots are interacted with? Looking to make it so that you can just hover over the hotspot to bring up the content, and to also change the icon that appears over the hotspots...is this at all possible? I've looked through the code but can't find anywhere to change things?
Wed, 12/14/2016 - 09:43
The best way to get this done
The best way to get this done is to create a feature request, and give a suggestion for a future proof solution for adding in this feature. The next step would be figuring out how to change the logic to display the content on hover and create a pull request for this in its github repository.
If you were only changing the css of the hotspot, that could be possible with a css hook, but changing the logic for displaying the content dialog would require some code changes.
Tue, 02/07/2017 - 08:07
How can i remove "enable full screen" button from my image hotspot?
Tue, 02/07/2017 - 08:35
There isn't a setting for it
There isn't a setting for it right now. If you want one to be added, you could create a feature request in the feature request forums:
Alternatively, you could also have a look at the source code on github and comment out the relevant line:
Mon, 02/13/2017 - 10:53
Question: change font
I love this tool. Is there a way to change the font (in the library or...). Not an expert in H5P :-).
Mon, 02/13/2017 - 14:33
Not unless you are willing to
Not unless you are willing to modify the code itself :)
I would try searching in the forums, I think there are some discussions there on the different ways you could do that.
Fri, 03/03/2017 - 19:29
Is it possible to do a slideshow with hotspots?
Sun, 03/05/2017 - 14:43
You may try to use Course
You may try to use Course Presentation with images or background images and add content as buttons on top of the images.
Wed, 06/28/2017 - 12:17
instead of onclick, can I have it where when you mouseover, the text will show up?