Image Hotspots

Primary tabs

Submitted by H5P Group on Wed, 07/30/2014 - 15:08

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.

824

Video and text

H5P Group

63175

Text and image

H5P Group

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.

And more

Description

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 H5P Group

New to H5P? Read the installation guide to get H5P on your own site.

Comments

BV52

Wed, 06/28/2017 - 16:43

Hi biscuitpaper,Currently

Hi biscuitpaper,

Currently this is not possible but I did check if there is a feature request for this. You can read it here.

-BV52

smarty01

Tue, 05/16/2017 - 21:28

can I create multiple info

can I create multiple info hotspots with image Juxtaposition?

tim

Thu, 05/18/2017 - 09:46

No, not currently.

Maidu

Mon, 08/07/2017 - 00:57

How to make slides with image-hotspots?

How to make slides with image-hotspots? like an example?

Mon, 08/07/2017 - 05:29

Hi Maidu,The example above is

Hi Maidu,

The example above is actually 2 contents. Currently you cannot create more than 1 image hotspots.

stgisler

Thu, 09/21/2017 - 21:28

Invisible Image Hotspots

Hi, a long time a was looking for a solution for several URL-Hotspots on one Image. But for my use it is important to have the possibility to set the hotspots invisible.

Would be nice to have this option in a next update. Thanks.

best,

Stefan

Fri, 09/22/2017 - 07:34

Hi Stefan,Thank you for the

Hi Stefan,

Thank you for the suggestion and I think you already posted your idea in the Feature Request forum. I'm also hoping that someone in the community help us in making your idea a reality :-)

drmarkorourke@g...

Tue, 10/17/2017 - 07:22

pop up window

I can't seem to get a pop up window to launch when the link in the text box is defined as such. Instead the url replaces the h5p content in the page.

Wed, 10/18/2017 - 07:40

Bug report filed

Hi,

Thank you for reporting this. A bug report has been filed and you can follow it here.

anitaprashar

Thu, 01/11/2018 - 18:22

Learning how to use h5p.org

Fri, 01/12/2018 - 06:38

Hi anitaprashar,Welcome to

Hi anitaprashar,

Welcome to H5P!

If you have any questions feel free to post in the forums :-)

Jocho

Fri, 01/19/2018 - 13:55

Multiple pictures

Hey,

I would like to create a Worldmap with the Hotspot tool. In this worldmap I would like to display short summarys of different projects I worked on in the world.
My problem:
The hotspot buttons are way too big. If I place two hotspots nearby it is rather unclear where the location is.
Is it ( and how )possible...
1. ...to shrink the size of the hotspots?
2. ...that I click on e.g. a continent so that the continents map is opening where I can use the hotspot tool (There is no need for Hotspots on the first map than)

3. Is there a differnt tool I could use for my plans?

I would really appreciate some help :)

Thanks

Mon, 01/22/2018 - 08:57

Hi Jocho,Please read my

Hi Jocho,

Please read my answer here.

Shilpa Mudur

Mon, 01/22/2018 - 13:33

Audio file on hotspot

Is it possible to play an audio file when one clicks on a hotspot?

Tue, 01/23/2018 - 07:33

Hi Shilpa Mudur,

This is not possible as of moment. We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful. 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.

jewwenong

Sun, 02/04/2018 - 12:58

Incorporating image slider with image hotspot?

Is it possible to have both image slider with image hotspot? I wanted an image gallery with the image hotspots to provide the info for each photo like how it is seen with the example above.

Mon, 02/05/2018 - 08:17

Hi jewwenong,This is not

Hi jewwenong,

This is not possible as of the moment. If I'm not mistaken this slide show example is a combination of HTML and H5P activity.

SarahBuksh

Wed, 05/02/2018 - 11:28

Transparent hotspots

Hello,

I am creating a game which the learners need to click on the background image to find hazards in the picture (health and safety). Is there a way that the hotspots can become transparent please? The idea is that they find the hazards and then a text pops up telling them that they are correct and a bit of info about why it could be a hazard.

Thank you

Wed, 05/02/2018 - 14:30

Hi Sarah,Find Multiple

Hi Sarah,

Find Multiple Hotspots is exactly what you need. Please note though that the text does not pop up beside the hotspot instead it shows at the bottom of the activity.

Wed, 05/02/2018 - 14:35

Thank you very much. Can I

Thank you very much. Can I still get a video clip to pop up with the text on that one?

Wed, 05/02/2018 - 14:41

Hi Sarah,I'm sorry that is

I'm sorry that is not possible using this specific content.

Thu, 05/10/2018 - 16:55

More than one hotspot to be found

I am creating this game and when the learners try to spot the hazards it only lets them find one? Can they find all of the hazrads on the same game please?

Fri, 05/11/2018 - 10:17

Find Multiple Hotspots is a perfect fit to what you want to achieve.

Fri, 05/11/2018 - 11:14

Can background image be big?

Thank you!

One last question. I have now created the game in multiple hotspots. I have uploaded the background images by taking a photo of the background (becasue it is a hand drawn outdoor environment). BUT the background is small. Can I get it to fit the whole screen please??

Thanks in advance.

Sarah

Fri, 05/11/2018 - 11:28

Hi Sarah,I'm sorry this is

I'm sorry this is not possible as of the moment. This though is an often requested feature and I hope that someone from the community picks it up soon.

Fri, 05/11/2018 - 11:30

Ah what a shame. It would be

Ah what a shame. It would be a great feature to have.

Thank you for getting back to me :)

cjf82

Mon, 05/21/2018 - 10:09

Is the maximum number of hotspots capped at 7?

Hi all,

We have Totara (version 2.7) and have encountered an issue once we use more than 7 hotspots where we get red banners across the top with weird symbols on the left hand edge.

Does anyone know what could cause this please? or is it capped at 7?

Tue, 05/22/2018 - 03:55

Hi cjf82,I have created a

Hi cjf82,

I have created a separate post for your issue.

BiLachner

Wed, 05/23/2018 - 09:28

smaller Display -> Cover entire background image

thanks for the feature. Everything works fine, but when I make the iframe in moodle smaller the text for the hotspot is always shown in the gray area, that covers the hole image. In the preview on the h5p.org Page it does not cover the background image. And there is not much text!!! ;-)

Is this an error? And how can I change it? I did not "activate" at one of the hotspots the "Cover entire background" image option!

Thanks, Birgit

Thu, 05/24/2018 - 13:35

Hi Brigit,I have created a

Hi Brigit,

I have created a separate thread for this.

richpav

Sun, 06/03/2018 - 07:33

Audio instead of video

I need the reveal to contain audio instead of video. Is that possible?

Mon, 06/04/2018 - 09:04

Hi richpav,This is not

Hi richpav,

This is not possible as of the moment. I thins though that this is great idea. Thanks a lot for contributing your ideas on how to make H5P better! We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful. In order for your feature request to attract as much interest as possible make sure it follows the below guidelines:

holmana

Wed, 07/04/2018 - 16:27

Using image hotspots on multiple pages

I have been able to use image hotspots to explain key elements of a financial statment for a nonprofit accounting class and it is great. However, many reports have multiple pages and I would like to string the pages together. I note this is done in the example with the next button but dont know how to implement that as it would solve the problem of multi-page hotspot learning.

Andy

Thu, 07/05/2018 - 06:10

Hi Andy,This was done using

Hi Andy,

This was done using HTML codes in the site and is outside of the H5P plugin.

Fri, 07/06/2018 - 12:59

Hotspot Alignment

Is there some trick to hotspot alignment or image sizing? The hotspot often does not go at the point of the cross when added so I have to keep changing to get the proper location.

brduffek

Fri, 07/06/2018 - 18:00

Re: Hotspot Alignment

In trying to help Andy I figured out the hotspot coordinates saved correspond to percentages of the image's dimensions and the editor seems to exclusively place hotspots on coordinates that are whole numbers. This makes the editor very imprecise on images with large dimensions. In this case each whole number of the y axis jumps about 156 pixels vs 10 for the x axis. I found it's possible to manually edit the H5P file to add more precise decimal coordinates for the hotspots and they appear to work on re-upload.

Mon, 07/09/2018 - 03:18

Hi brduffek,Thank you for the

Hi brduffek,

Thank you for the input.

There has also been some requests to have a larger image preview. This is one of those requests.

Nina Collins

Wed, 07/11/2018 - 18:09

Audio

This is a great application. It would be great if we could embed audio files into the hotspot pop ups>

gemmaAWLS

Tue, 09/11/2018 - 13:40

Hotspots

How do I change the image size of a hotspot?

I have tried to edit the image using the rescaling tool, but the image still displays far too large.

Any help would be most appreciated.

otacke

Wed, 09/12/2018 - 09:10

Hi Gemma!The Hotspots always

Hi Gemma!

The Hotspots always use the full width next to a button (either left or right) and scales the height according to the content. Unfortunately, there's no option to set a fixed width or height, but you might want to ask for that feature in the feature request forum.

Cheers,

Oliver

Wed, 09/12/2018 - 14:53

re: Image size

If the configuration doesn't do what you are looking to do there are free image tools you can use to resize images to the size that you desire, such as GIMP.

iamtheluckyest

Wed, 12/12/2018 - 17:03

Image Pop-up Content Type Doesn't Load

It looks like when the Image Hotspot content type is installed it isn't installing its dependent Image library. The effect is that when you try to add a Content Item to Popup Content, you can only choose between Video and Text. Inspecting the semantics object, I can see that the Image type should be there, but it doesn't show up in the dropdown. I'm using Drupal 8 and when I went to the H5P libraries, I could see that there was in fact no Image library. I managed to solve the problem by uploading the sample H5P demo above which uses images in the popup content. When I uploaded the demo, it installed the Image library for me. It seemed that this might be an oversight with the installation of the Hotspot content type that would be beneficial to have corrected.

Thu, 12/13/2018 - 04:56

Hi iamtheluckyest,Thank you

Hi iamtheluckyest,

Thank you for the reporting this. Unfortunately we have not been able to reproduce the said issue which is why we are unable to find a permanent solution. If you can provide additional details such as which plugin and version you are using maybe we can finally reproduce finally find a solution.

Thu, 12/13/2018 - 14:16

Our Drupal instance is

Our Drupal instance is version 8.5.8, our H5P module is version 8.x-1.0-rc10, Image Hotspots is 1.7.3.

Here are some other things that I'm not sure if they are helpful:

1. When I noticed that the Image library failed to install, I had wondered if perhaps the only reason Video and Text worked was because they'd been installed with another content type that we were already using (like Question Set, for instance). I added the Image Slider content type just to see, and while it installed an Image library, it didn't work, I think because the version was an earlier one than the one Hotspot was looking for.

2. The issue described originally occurred on my local environment. But in our staging environment, Text and Image worked, and Video didn't. A Video library was installed, but it was 1.4.2 not 1.5.2. I noticed in staging that several of the content types (but not Image Hotspots) needed to be updated so I updated them. This added Video 1.5.2 and now Video shows up in the dropdown in Image Hotspots.

Mon, 12/17/2018 - 08:19

Thank you for the additional information. You gave a very important hint and I had to clean out all H5P on a test environment which enabled me to reproduce the issue. I have filed a bug report and you can follow the progress here.

Mon, 12/17/2018 - 14:43

Glad that was helpful

Great! I'm glad that was helpful. I had sent an internal message a while ago offering to help with feature requests and bug fixes (in particular, ones that are relevant to the work I'm doing for my company and that support the needs of our clients). For example, looking at the Image Hotspot code relevant to making the hotspot coordinate selector more precise, I thought it wouldn't be too difficult to take that project on. My question when I sent the message had been with regard to getting a dev environment set up so that I can test any code changes I think would be appropriate. I never heard back. Could you point me in the direction for how to get a dev environment set up and let me know if there is a process I should be following to contribute to a project?

Thanks!

Tue, 12/18/2018 - 01:57

Thank you for your interest in contributing and I apologize for the delay in replies the core team is currently working on releasing some new content types as well as some bug fixes.

Anyway to answer your question this documentation is a good place to start. For the dev environment we recommend using Drupal 7 since it H5P has a built in dev environment with drupal 7. You can read more about it here.

Lastly this is the github repository for the image hotspot.

If you have any questions or clarifications I would suggest to post a separate thread in the forums. So that we will have some flexibility like attaching images/screenshots etc.

Wed, 01/09/2019 - 15:48

Image hotspot

is there any way to change the shape of the hotspot (beside the color). For example, I would like to use "hand" instead of the "cross" icon. Is it possible?

Thanks. Peter

Thu, 01/10/2019 - 03:36

Hi Peter,The easiest way is

Hi Peter,

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.

Andre Smuts

Thu, 02/07/2019 - 22:50

Uploading, please wait...

my image upload does not work

You are here

Image Hotspots

Primary tabs

Would you like to create content like this on your own?

Description

Comments

Pages