# Hide a one-shot button under an image

**URL:** <https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 7, 2022, 3:58pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178 "2022-04-07T15:58:07Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![dp\_engsberg](https://avatars.discourse-cdn.com/v4/letter/d/57b2e6/32.png) [@dp\_engsberg](https://forum.inductiveautomation.com/u/dp_engsberg)\
**Post date:** [April 7, 2022, 3:58pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/1 "2022-04-07T15:58:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [April 7, 2022, 4:02pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/2 "2022-04-07T16:02:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dp\_engsberg](https://avatars.discourse-cdn.com/v4/letter/d/57b2e6/32.png) [@dp\_engsberg](https://forum.inductiveautomation.com/u/dp_engsberg)\
**Post date:** [April 7, 2022, 4:04pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/3 "2022-04-07T16:04:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 4:09pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/4 "2022-04-07T16:09:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dp\_engsberg](https://avatars.discourse-cdn.com/v4/letter/d/57b2e6/32.png) [@dp\_engsberg](https://forum.inductiveautomation.com/u/dp_engsberg)\
**Post date:** [April 7, 2022, 4:11pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/5 "2022-04-07T16:11:12Z")

</div>

Another reason is the image is quite large.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [April 7, 2022, 4:11pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/6 "2022-04-07T16:11:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dp\_engsberg](https://avatars.discourse-cdn.com/v4/letter/d/57b2e6/32.png) [@dp\_engsberg](https://forum.inductiveautomation.com/u/dp_engsberg)\
**Post date:** [April 7, 2022, 4:21pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/7 "2022-04-07T16:21:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 4:24pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/8 "2022-04-07T16:24:56Z")

</div>

> [@dp\_engsberg](#):
>
> I'm only trying to implement what I've been asked.

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

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [April 7, 2022, 4:25pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/9 "2022-04-07T16:25:03Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![bkarabinchak.psi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bkarabinchak.psi/32/83567_2.png) [@bkarabinchak.psi](https://forum.inductiveautomation.com/u/bkarabinchak.psi)\
**Post date:** [April 7, 2022, 4:37pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/10 "2022-04-07T16:37:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dp\_engsberg](https://avatars.discourse-cdn.com/v4/letter/d/57b2e6/32.png) [@dp\_engsberg](https://forum.inductiveautomation.com/u/dp_engsberg)\
**Post date:** [April 7, 2022, 4:52pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/11 "2022-04-07T16:52:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [April 7, 2022, 4:56pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/12 "2022-04-07T16:56:18Z")

</div>

You can set a all of the styles alpha channel to zero, you’d have to do that in multiple places.  
Edit:  
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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 5:20pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/13 "2022-04-07T17:20:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dp\_engsberg](https://avatars.discourse-cdn.com/v4/letter/d/57b2e6/32.png) [@dp\_engsberg](https://forum.inductiveautomation.com/u/dp_engsberg)\
**Post date:** [April 7, 2022, 7:44pm UTC](https://forum.inductiveautomation.com/t/hide-a-one-shot-button-under-an-image/58178/14 "2022-04-07T19:44:04Z")

</div>

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.
