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

younesde

Mon, 10/20/2014 - 22:37

image hot spot

salma siddika

Sun, 10/18/2020 - 17:02

science

i am unable to find options like image hotspots column .why?

BV52

Mon, 10/19/2020 - 20:32

Hi Salma,To provide a best

Hi Salma,

To provide a best possible experience for new users and to ensure that people use H5P.org only for trying out H5P (we've had more traffic than our server can handle lately, ref also the warnings when you create content, embed content and view the content) we are experimenting with which content types should be available here.

Check the getting started page for information on how you can use all the content types and use H5P for real. We unfortunately are not able to provide free hosting, only free software :) Hopefully you'll consider supporting the H5P Core Team by using H5P.com.

-BV

Myispguy

Sun, 12/07/2014 - 19:11

greart

Varvara

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)

falcon

Mon, 12/15/2014 - 22:33

Thanks! :)

Doursi

Tue, 02/03/2015 - 19:22

Responsive

H5P is responsibile ?

Wed, 02/04/2015 - 09:16

That is up to each content

That is up to each content type. Most content types today are resizeable. Some, like drag the words, also changes its layout when used on small screens. On pc's the words you can drag are to the right. On mobiles the words are at the bottom.

manoj.chaursiya...

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.
- Manoj

Photoacoustic

Wed, 08/12/2015 - 20:08

World map with small hotpots

Dear all

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

dbaker

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

Hi,

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

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

Ok, so the video is bigger than the image hotspot originally is, and the image hotspot expands to give the video more room, is that it?

Martha

Fri, 12/04/2015 - 11:26

CAT

Nothing

Fri, 12/04/2015 - 11:29

Try to use examples

vouloi

Tue, 02/23/2016 - 11:05

Hotspot Photo and Text

Hello!!!

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?

Thanks!

Tue, 02/23/2016 - 11:42

Hello :) It isn't possible at

Hello :) It isn't possible at the moment, but in the next version it will be!

[email protected]

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?

Heidi

Mon, 08/13/2018 - 06:03

Hi Heidi,Yes, you can now use

Hi Heidi,

Yes, you can now use videos as the pop-ups.

-BV52

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.

mary.plasterer

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

Yeah, it is very certain. I've seen it in action :)

Swerv3

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:

I would like to be able to customise the hotspot abit e.g. size, opacity and design.
The ability to choose whether to have a tooltip on hover which displays the header. I know it isn't as useful for mobile but on desktop.
When embeding a video the ability to configure the playbar to have fullscreen or not. I know this can be done on the h5p element its self so maybe this request is moot.

These are just a couple of things we have thought of while using this.

Again love your work.

fnoks

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

Thank you!

Thanks I will be sure to add them.

giorgioitaliano

Sun, 09/04/2016 - 00:58

Image size

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.

Hello,

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 :)

Lone Guldbrandt...

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?

icc

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.

Bespoke

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?

Regards Michael

timothylim23

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

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.

- Tim

m2coyote

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

Thanks.
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.
http://para-co.com

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:

Selection_202.png

Selection_203.png

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.

davehargest@hot...

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?

thomasmars

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.

- Thomas

Tue, 02/07/2017 - 08:07