If the width of the container is small enough, then initial value of 24 might be too large for the screen and it is only getting worse with increasing page size.

The main issue seems to be between those two:
https://github.com/h5p/h5p-image-hotspots/blob/master/scripts/image-hotspots.js#L238
https://github.com/h5p/h5p-image-hotspots/blob/master/scripts/image-hotspots.js#L242

Initial font size of 24 for containers with small width might be too big. It would get worse if some JS code is changing the width of the embedded IFRAME with value of self.initialWidth becoming smaller than the current width, thus ever increasing the font size.

This is a really bad solution that seems to mitigate the issue enough to make materials usable, though it could have some unexpected consequences and the logic of calculating the font size should be changed.

    if (self.initialWidth === undefined) {
      self.initialWidth = self.$container.width();
      if (width < 800) {
          self.initialWidth = 800;
      }
    }

Example: https://vara.e-koolikott.ee/h5p/embed/1888

Start by opening it in a browser window with really small width (350 should be good enough), then resize it to around 700 and all the hotspot elements would be covering each other. It is also possible to click the fullscreen button and see the effect without changing the size of the initially small window.

The issue is mostly about initial font size being too large for the small screen with densely placed hot spots.

The Image Hotspots do not use the H5P image library and are missing features such as ALT tags which are needed for accessibility.

"Copy" contents from original hotspot - then create new hotspot h5p element - "paste and replace" is grayed out on the new hotspot - however I CAN paste and replace the original hotspot with the ORIGINAL hotspot contents - absolutely useless.

It would appear that H5P is dying on the vine as fewer and fewer users are found on the boards and no one seems to be developing or fixing the current broken H5P elements that exist. This "issues" board hasn't seen any input for nearly 8 months. I don't know why I post here or even why I am trying to work with H5P.

I would like to be able to combine Images and Text in a Popup. Would that be possible to integrate?

Using the Hotspot interaction I am trying to create a menu/grid with different options, each of those will have a text explanation and a video. I would love to have those two pop-up at different times rather than all in one pop-up as the interaction currently allows. That way the user can decide if they want to read or watch a video. My goal is to have a More Info icon to show the text, and a Play icon to show the video, but as of now I can only use one style of icon for the whole interaction and it ends up being confusing.

When hovering over a hotspot icon in H5P image hotspot the apostrophe in the header appears as code (&#39). Is it possible to change this, or to remove the hover display function?

I want to prequalify a pull request to make audio content available through image hotspots.
Currently, image hotspots 1.8.3 only offers choices for hotspot content of text, video, and image. However, it would be useful to have the option of playing audio files when hotspots are clicked.

I am working on a project related to language learning and so I want to create an image of items, place a hotspot upon each depicted item and then allow the user to hear the pronunciation for the item’s associated word when the hotspot is clicked.

A search on H5P.org reveals that others have previously asked for audio to be made available as a hotspot option. For example: https://h5p.org/node/252524, https://h5p.org/node/85262, https://h5p.org/node/45583

Technical solution:
I have added the audio player library (H5P.Audio 1.4) as an option to the image hotspots library’s semantics.json file. The list is therefore now H5P.Text, H5P.Video, H5P.Image, and H5P.Audio.

UX:
The audio library offers good UX options so authors should have no problems configuring the hotspot audio to suit their needs.

Accessibility:
Not relevant

P.S. This is my first ever pull request and first attempt at contributing to the work of the open source community!

Hey,

I have created a feature to enable the user to set a different color for hotspots that were already clicked.
Screenshots of it are attached.

I would really like to share this with you, because I think it could also be useful for other ppl and also want to give something back to this awesome community.

If you like it I´d create a PR. If you would like to have something changed I´d invest the time to make it fit to your requirements.

Please let me know if you would like to integrate this feature.

Here is the site where I've embedded the h5p hotspot:
http://legacy.mckinneyisd.net/Campuses/school_websites/boyd/library.html

Is there a way to make the banner h5p hotspot image responsive on mobile?

When I add a YouTube video as a hotspot I can not resize the video. Is it possible to change this setting even if it is via css?
Well I always have to leave the background image too big or the video stays with a scroll

Because of the small size of the hotspot image in the editor it is hard to position the cross icons precisely. It would be very useful to be able to adjust their position more exactly.

Possible enhancements:

• Hotspot position section in the editor: show in full page width instead of thumbnail. Please change .image-coordinate-selector to a max-width of 750px instead of 250.
• adding an ID to each hotspot div - this would make it possible to adjust the position by overriding css
• Add a +/- horizontal and +/- vertical fields to adjust the position.
• Also if one could click and drag the hotspot instead of just click, it would be easier.

It would be great to provide a default number/counter icon that simply displays a number in the order of the hotspots (eg, 1, 2, 3, etc.)

Hey,

first of all, thanks for the great plugins. It works really good.

I would like to be able to add my own icons for the clickable hotspots. Best would be if this will be sometime integrated into the UI.

For the meantime, could you give me a Hint how/ where the current Image for the hotspot is created/ loaded. So I could try to change it on my own in the code, but haven´t found the right place yet.
I found where you set the color of the spot and I know that you use FontAwesome for the icon, but I couldn´t find where you specified the css class 'fa-plus-circle'.

Thanks in Advance.

Not an issue but a feature request -> I would like to be able to customise the hotspot abit e.g. size, opacity and design.

https://h5p.org/comment/6745#comment-6745

Hi Guys,

I've already completed this feature request for my company and thought it'd be useful to share with the community.

User story:

As an author I want to be able to customize the icons used for the hotspots including the background color and color of the icon to suit varying background images.

I also want to be able to use letters or numbers (max 2 chars) to display on the hotspot if needed for example 10 or AB.

UX:
Have a group that is default to collapsed containing all the options to avoid taking up too much room if the author just wants to use the default options. Icons can be changed from an icon selector similar to the color selector.

Accessibility:
Will be improved as the color of the hotspots can now be suited based on the background image.

Technical solution:
I created a new editor similar to the color selector (this can now be used in any other h5p content aswell) using https://codeb.it/fonticonpicker/. It is basically a text field that contains the fa-*** code from font awesome so can be applied to a css class to display the icon.

The icon-selector editor can be found here: https://github.com/lukemuller/h5p-editor-icon-selector

And the update to the h5p-image-hotspots content type here: https://github.com/lukemuller/h5p-image-hotspots-icon-customisation

Thanks!

Greetings ✋🏽,

I'm manually packing the h5p-image-hotspots library from source (check out at this commit) as follows:

h5p pack h5p-image-hotspots h5p-image-hotspots.h5p

and get the following output:

Packing 1 library to file...
h5p-image-hotspots OK 1.10.6

along with the h5p-image-hotspots.h5p file.

When I upload the h5p-image-hotspots.h5p file to my moodle instance, I get the following error:
Sorry, the file is not valid.

If I upload the same .h5p file downloaded from h5p.org, upload is successful.

What am I missing?

Description

In WordPress multisite blog, I'm trying to create a hotspot and trying to place an image as its content. There are options for text and video but the image option is missing.

Expected Behavior

I expect to see Image as one options to choose from as hotspot popup content.

Actual Behavior

There are options only for text and video.

Possible Fix

It seems that the "H5P.Image" library is missing. Image option works if that library is installed via installing another content type eg. True/False Question.

Steps to Reproduce

0. Assume vanilla blog in multisite installation
1. Install Image Hotspots via Dashboard -> Add new
2. Add hotspot

My Environment

• Version used: 1.7.4
• H5P WordPress plugin version: 1.11.3
• WordPress version: 5.0.3
• Browser Name and version: Chrome 72.0.3626.109
• Operating System and version (desktop or mobile): Windows 10 Pro 1809