Transparent Icons in Image Hotspot
Submitted by OT_FEAS on Tue, 08/03/2021 - 21:23
Forums:
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:
Panox
Tue, 02/08/2022 - 13:09
Permalink
I found a way in Lumi:Go to:C
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.
Panox
Tue, 02/08/2022 - 13:11
Permalink
Transparent PNG
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.