PNG buttons with transparency, only non-alpha pixels become triggers, html5

May 24, 2016

Hi All,

We are having problems with our icon sets, which are drawings on top of alpha channel in png files. We are finding that the only clickable parts of the icons are the actual drawings (which are quite tricky to click on exactly). We would prefer if the rectangle of the png area was the clickable area. It seems that when we preview in SL it looks like all is ok, but depending upon browser it will either load the flash or html 5 version, and it's the html5 version which is causing issues. Please see attached for an example zip.

9 Replies
Walt Hamilton

If the colors are right, and you are lucky, you may be able to put a color on the icons, and use SL's Set transparent color. Just a wild guess, as I haven't tested it yet.

What I do know that will work is a rectangle over the icon. Fill it, and set its transparency to 100%, and it will catch the click. If it is set to No Fill, it will not.

Will Moindrot

Thanks All,

I think the approach that Walt suggests is the one we were going to adopt, but it does add a bit of extra complexity. These will be used primarily for an icon set that will become part of our reusable template, but also for icons which wil be used in specific activities, and the approach does add an extra layer. I don't yet know of a way to simplify or lock-off standardised layers of an interaction as in a template.

So with this in mind Bob's suggestion sounds very promising and we'll give it a test. Along with Walt's suggestion it means that we don't need to create a whole new varients of our icons with different bg colours, and we can reposition them freely, and it cuts down on the number of layers.

It's definately a bit of a gotcha though!

Thanks again, Will

Glenn Jones

I know this thread is old, but I thought I'd add in that I've just had this issue and Walt's suggestion has worked perfectly.

I've created a button in Photoshop with a fair few transparent areas - I've created a Normal, Hover, Down and Disabled version.

In SL2, I've put a rectangle behind the image in the Normal state, set it to no border and the transparency to 100%.

Now, when I use the HTML5 version my mouse doesn't see the transparency and it behaves as it was designed :)

This discussion is closed. You can start a new discussion or contact Articulate Support.