Image Hotspots, using png files for hotspot
Submitted by studioka on Thu, 07/02/2020 - 21:29
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
Fri, 07/03/2020 - 18:14
Hi studioka, Have you tried
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.
Tue, 07/14/2020 - 11:16
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:
Simply removing that background: #fff; line from the CSS solves your problem, as shown in my little animation attached.
Thu, 10/15/2020 - 08:29
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!
Thu, 10/15/2020 - 16:33
You'll find that css file here: h5p\libraries\H5P.ImageHotspots-1.8\styles\image-hotspots.css
Wed, 08/04/2021 - 20:25
Can you give some more
Can you give some more information on how to do this edit?
Tue, 02/08/2022 - 13:13
Path in Lumi
I found the solution here:
Search for "visuals" and edit with Notepad++ or another program to " backgroundColor: 'rgba(0, 0, 0, 0)'"
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.
Tue, 02/08/2022 - 18:12
Hi!All you achieve by that is
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".
Mon, 05/23/2022 - 22:56
Where is this folder?
I don't appear to have a libraries folder as you do. Is there another place this file may exist?
Tue, 07/21/2020 - 23:57
I hope you found my reply useful.
Wed, 08/04/2021 - 20:26
Can you give more information
Can you give more information on how to do this edit?
Mon, 05/23/2022 - 22:55
I can't find this file, as
I can't find this file, as the Libraries folder does not exist. Any ideas?
Tue, 05/24/2022 - 18:03
Which platform are you using
Which platform are you using H5P activities on? Wordpress, Moodle, Drupal, etc.?
Tue, 05/24/2022 - 21:35
My apologies, should have
My apologies, should have included that! We are using Moodle.
Tue, 05/24/2022 - 22:55
Unfortunately in Moodle the
Unfortunately in Moodle the libraries folder is not accessible
Tue, 05/24/2022 - 22:05
Oh, we found it! We followed
Oh, we found it! We followed the steps found here https://moodle.org/mod/forum/discuss.php?d=365914
Wed, 05/25/2022 - 15:52
Glad that you found a
Glad that you found a solution!