Image Hotspots, using png files for hotspot

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's picture

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's picture

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.

Thank you very much for the solution.

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

papi Jo's picture

Hi jagan,

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

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

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's picture

Hi!

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

I don't appear to have a libraries folder as you do. Is there another place this file may exist?

papi Jo's picture

Hi studioka,

I hope you found my reply useful.

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

I can't find this file, as the Libraries folder does not exist. Any ideas?

papi Jo's picture

Which platform are you using H5P activities on? Wordpress, Moodle, Drupal, etc.?

My apologies, should have included that! We are using Moodle.

papi Jo's picture

Unfortunately in Moodle the libraries folder is not accessible

 

Oh, we found it! We followed the steps found here https://moodle.org/mod/forum/discuss.php?d=365914

Thank you!

papi Jo's picture

Glad that you found a solution!