Hide a one-shot button under an image

I’d like to hide a one-shot button under an image using Ignition 8.1. But it seems that I can’t click on it when its sent to the back of the z order. I’ve search around and maybe the way to do this is put the button on top of the image and setting the opacity to 0. If this is the way, where do I find the opacity setting or are there several for a one-shot?

Why do you need to use a button? Couldn’t you just put the script onto the Image?

They don’t want to click on the image. They want a small button that they only know is there to be used.

Ahh … security by obscurity

I recently saw this described as playing “peek-a-boo” with a 3 year old, and having them hide behind the couch going “You can’t see me, so I’m not here!”.

Personally I would suggest a role based security model that controls who can see and push the button.

Another reason is the image is quite large.

Agreed. This sounds like a very questionable security issue. Anybody who knows anything about dealing with web content would easily be able to examine the DOM and identify the button if they had any idea it might exist. I really suggest putting the script on the image and restricting script execution based on some sort of role.

I could not agree more. I’m only trying to implement what I’ve been asked. There is only one user for the system within the confines of the facility.
Can I get an image to behave like a one-shot button?

Part of being a professional is telling a non-professional why their desires are sub-optimal.


All you need is a custom property which denotes whether the script has already been executed, like Image.custom.already_did_this.

then you just have an onClick script with whatever security restrictions in place you deem necessary, and a Script Action like this in the onClick Event:

if not self.custom.already_did_this:
    # place your script here.

To be fair, sometimes they simply do not care lol.


Thanks for the help. I will add a smaller image that looks like the background image behind it, and add the script you suggest. Implementing the ‘Are you sure’ will add to that I’m sure.

One last question. Is there a way to make the one-shot button transparent?

1 Like

You can set a all of the styles alpha channel to zero, you’d have to do that in multiple places.
Its actually not as many places as i though, get rid of the text, writing text, icons, then set the readyState and writing state background color’s alpha to zero, should be totally invisible.

1 Like

And if you don’t want users to know that a button is there when hovering over, make sure to set the style.cursor prop to the normal cursor.

1 Like

I ended up making a style class with opacity=0 and a hover element state set to auto for the cursor (that might change). Then applied the class to the one-shot. Setting the color to alpha=0 works too, but required editing the font, border, etc. Thanks for the help.