Transparent hotspot icon

Submitted by nimalr on Mon, 06/27/2022 - 04:13

Forums:

Hi,
I want to add pop-up text to a flow diagram where I already have circles with numbers to serve as hotspots. I have tried using a transparent image in Hotspot Icon -> Uploaded Image, but the Icon displays in a white background. I am using Lumi to edit the .h5p file.

H5P file:

Moodle request - Normal.h5p

Attachments:

simple-request.png

transparent.png

Content types:

Image Hotspots

villon

Mon, 06/27/2022 - 19:57

Permalink

Transparent hotspot icon

Moin nimalr

you have to look after the properties of png file format exactly here:

https://en.wikipedia.org/wiki/Portable_Network_Graphics

look for transparency.

Greetings

villon

otacke

Mon, 06/27/2022 - 20:45

Permalink

.h5p-image-hotspotHi Nimalr

.h5p-image-hotspotHi Nimalr!

The white default background color is set within the stylesheet of the content type inside the `.h5p-image-hotspot` class. If your image is transparent, than that background color will still show. The behavior seems to be quite deliberate, cmp. https://h5ptechnology.atlassian.net/browse/HFP-3491, but the H5P core team might agree to a toggle switch in the editor here maybe or even allow to select the color (including alpha channel) when an image is used?

Best,
Oliver

nimalr

Tue, 06/28/2022 - 15:55

Permalink

Thanks Oliver,I saw some

Thanks Oliver,
I saw some previous discussions where they suggested changing the css.
For now I have edited the css file and it works fine. An alternative solution is to allow setting the hotspot icon for each hotspot separately so that the hotspots can labeled 1, 2, 3 etc.