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

Fri, 02/08/2019 - 07:42

Hi Andre,I created a separate

Hi Andre,

I created a separate post for this here.

-BV52

sibiria

Mon, 03/11/2019 - 10:56

Audio + Text

Hi,

as a language teacher I would like to put in not only text in the hotspot-content, but some audio together with the text. So my learners could read and hear, how to pronounce the words.

Is there anything like this planned?

Thanks

Tue, 03/12/2019 - 01:23

Hi sibiria,There are no plans

Hi sibiria,

There are no plans in the near future for this feature to be added. But you post a feature request for this. 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.

Lyuba

Wed, 03/20/2019 - 09:27

Copy Link function is not possible?

Hi there! :)

Is it possible also to link to the image?

Or there is just embed function possible?

Fri, 03/22/2019 - 03:42

Hi Lyuba,I'm sorry but I do

Hi Lyuba,

I'm sorry but I do not follow, can you please elaborate your question.

Thu, 06/20/2019 - 07:14

Print option

Can you print a hotspots presentation?

thomasmars

Thu, 06/20/2019 - 09:40

Hi Sau,You can print the page

Hi Sau,
You can print the page, like any other. There is no special functionality for printing everything that a hotspot contains, if that is what you mean.

Felix kwok

Thu, 07/25/2019 - 11:50

Adding image hotspot inside course presenation mode

I think it will make lots of sense to be able to insert image hotspot inside the course presentation slides.
This will add lots of interactive to the old boring PPT. Right now I am going to use interactive video with a static image to fake the effect.

MDRobledo84

Thu, 09/05/2019 - 16:13

Images hotspots with questions

Is it possible to use this tool (specifically Image hotspots) but instead of the text with quetions the student have to answer (not like the find the Hotspot tool in which on the image they have to click the correct hotspot). Like here when you clic the spot it opens the text with info regarding that section of the image, instead that it open for exam a multiple choice question?

Thu, 09/05/2019 - 19:17

Hi MDRobledo84,This is not

Hi MDRobledo84,

This is not possible not unless you make additions to the code. You can also post this in the Feature Request forum. 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 learner 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

Ashapoornima R

Tue, 10/22/2019 - 12:19

Multi coloured hotspot??

Can I add multicouloured hotspot icons on the same image??

Tue, 10/22/2019 - 19:06

Hi Ashapoornima R,I'm sorry

Hi Ashapoornima R,

I'm sorry but this is not possible. However since H5P is open source if you or anyone with developer skills can make the changes. You can also post a request in the Feature Request forum.

-BV

[email protected]

Sun, 11/03/2019 - 20:24

Hot spots

Before I start with the hotspots in my Pressbooks book, can anybody confirm that they are accessibility compatible?

I made a lot of cool H5P features before that I had to remove bc they were not compatible with screen readers.

Mon, 11/04/2019 - 19:39

Hi,Image hotspot should be

Image hotspot should be compatible with most screen readers. For future reference this page provides list of content type accessibility. If you encounter any issues with using contents that are listed that have accessibility features please file a bug report so that the core team can check.

joanneoud

Wed, 11/13/2019 - 18:45

image hotspot reading order

I can get the image hotspots to work fine in a screen reader, but the reading order seems random. I created 5 hotspots and the third one has been designated somehow as #1, the 4th as #2, the 5th as #3, the first as #4, and the second as #5, and they are read/encountered in that order by the screen reader. How can I specify which order I want the hotspots read in?

Thu, 11/14/2019 - 17:17

Hi joanneoud,As far as I know

Hi joanneoud,

As far as I know the order is not based on which one you created first but instead based on the positions of the hotspots. Based on the tests that I made it follows a top to bottom then right to left heirarchy.

icc

Tue, 11/05/2019 - 09:14

BV is correct, this content

BV is correct, this content type is accessible.
However, some of the responsibility still lays on the author to follow the WCAG guidelines as the content will not be accessible unless the appropriate labels and alt text fields are filled accordingly.

marbaque

Mon, 08/01/2022 - 17:58

Hotspot icon

Could I request something? When using image hotspots, I have had the need for an option of numbers instead of an icon. For example, if the hotspots have an order, you want the user to open them.

Tue, 08/02/2022 - 18:22

Hi marbaque,Thank you for the

Hi marbaque,

Thank you for the suggestion. I would like to ask that you post this in the feature request forum.

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 learner 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
Make it clear what content types this is relevant for, and or if this is a new content type

You are here

Image Hotspots

Primary tabs

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

Description

Comments

Pages