Image Hotspots, using png files for hotspot

Submitted by studioka on Thu, 07/02/2020 - 21:29

Forums:

Hello

When I upload the png file, the background appears as white. Is there any solution for this? I want to make it invisible or completely invisible in a ring hotspot

example: https://h5p.org/node/942559

BV52

Fri, 07/03/2020 - 18:14

Permalink

Hi studioka, Have you tried

Hi studioka,

Have you tried using Find Multiple Hotspots? How does it differ from what you would like to achieve? As far as I know transparent images such as png does not work with H5P contents.

-BV

papi Jo

Tue, 07/14/2020 - 11:16

Permalink

Hi studioka,

The problem is not with using a png image for your hotspots. Transparent png images do work fine in H5P. The bug comes from the image-hotspots.css where we find this line:

.h5p-image-hotspot {
background: #fff;

Simply removing that background: #fff; line from the CSS solves your problem, as shown in my little animation attached.

jagan

Thu, 10/15/2020 - 08:29

Permalink

Where can we find this css file please?

Thank you very much for the solution.

Where can we find this css file please, thank you!

papi Jo

Thu, 10/15/2020 - 16:33

Permalink

Hi jagan,

You'll find that css file here: h5p\libraries\H5P.ImageHotspots-1.8\styles\image-hotspots.css

OT_FEAS

Wed, 08/04/2021 - 20:25

Permalink

Can you give some more

Can you give some more information on how to do this edit?

Panox

Tue, 02/08/2022 - 13:13

Permalink

Path in Lumi

I found the solution here:

C:\Users\Username\AppData\Roaming\lumi\libraries\H5P.IVHotspot-1.2\scripts\iv-hotspot.js

Search for "visuals" and edit with Notepad++ or another program to " backgroundColor: 'rgba(0, 0, 0, 0)'"

----------------------------------------------

visuals: {

shape: 'rectangular',

backgroundColor: 'rgba(0, 0, 0, 0)'

-----------------------------------------------

Set background of PNG to transparent.

The background will be white again if you edit the image e.g. by rotating.

otacke

Tue, 02/08/2022 - 18:12

Permalink

All you achieve by that is that files created locally on your machine will contain that change. On other platforms that you may upload that file to, H5P will use the original code from the original "H5P.IVHotspot 1.2".

Best,
Oliver

icenter university

Mon, 05/23/2022 - 22:56

Permalink