Transparent Icons in Image Hotspot

Is it possible to create a transparent icon in the Image Hotspot tool? This should be easy as the clickable areas are transparent in the Find Multiple Hotspot tool.

Basically, I want the advanced options for what happens in the Image Hot Spot Tool, like the option for adding text or images once you click on the hot spot, but I don't want the students to know where the hot spots are, they have to find them - hence the transparent icons.

I tried uploading a transparent PNG, but the css autofills the button with white or black. I know you can edit the css, but I don't want to have to download the whole activity, I want it to stay in HP5 and be embedded in a website.

 

 

Content types: 
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network

I found a way in Lumi:

Go to:

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.

 

Go to:

 

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.