LiveCode Forums.

Hi there,

It seems to be the case, when i use a png with a transparent area, as a clickable control.
I cant click the transparent areas of that image. Only areas without transparent pixels are clickable.

Is there a way to overcome this behavior..?
I see that on some objects, you have a hotspot property. But i am not entirely sure if this is related, or how to use it.

Hi doobox,

this is correct behaviour!

Use a button to display the PNG! No one will tell the difference
This will also work with the transparent areas of the image.

Create a button and uncheck: showname, autohilite, opaque
Set its borderwidth to 0 and its icon to the ID of the PNG image.

The "hotspot" will define the offset from the topleft corner of the image
when you use that image as a CURSOR as you can read above the "hotspot"
entry fields.


Best

Klaus

Thank you Klaus,

So much to learn...

Hi doobox,

yep

Hint:
Looking up unknown terms in the dictionary doesn't hurt


Best

Klaus

Hello -

I'm wondering if there's there a quick way achieve the *opposite* effect of Klaus' suggestion?
In other words, is there an easy way to set the clickable area of a button so that it reacts only to the opaque pixels in my PNG icon (and not the transparent area)?

I would like to preserve the functionality of my buttons, while restricting the "live" area to the non-transparent parts of the icon image.

Thank you!
--John

John,

IMHO, it does not sound as a good UI design. AFAIK, a button is supposed to be active on its whole area.

Not tested: use 3 layers. On the top layer, put the PNG as a control, sending mouseUp and other relevant messages to the button, on the mid layer, a transparent grc trapping the mouse messages over the button, and the button on the bottom layer.

Skilled LC users may come with a simpler trick to achieve this. Just discovering the richness of LC.

HTH

Hi, Didier -

Thanks for your quick reply!

I'm actually not designing a UI - more like using buttons as game pieces. There are a few features of the buttons that I'd like to use (drop shadow, setting icons by number, etc.) that I don't think would be available to me if I were to switch over to Livecode image objects. (Correct me if I'm wrong here, though, as I'm also pretty new to Livecode.)

Anyway, using layers as you've suggested may be the solution I'm looking for. If not, then I'll either need to find a way to refine my button selection areas, or to expand my knowledge of Livecode's image parameters.

Either way, thanks for your help & advice!
--John