# Enbling a Border on an Image

**URL:** <https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501>\
**Category:** Ignition\
**Created:** [October 30, 2013, 10:24pm UTC](https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501 "2013-10-30T22:24:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\
**Post date:** [October 30, 2013, 10:24pm UTC](https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501/1 "2013-10-30T22:24:26Z")

</div>

I have been trying to enable a border on an image but I’m messing up either the syntax or the property call, I can diable the border easy but I am unable to add one back. Does anyone have any examples of enabling and disabling a border on an image based on a mouse over? Thanks

---

<div class="post-metadata">

**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\
**Post date:** [October 31, 2013, 2:38pm UTC](https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501/2 "2013-10-31T14:38:39Z")

</div>

crickets…

---

<div class="post-metadata">

**Author:** ![jaepark](https://avatars.discourse-cdn.com/v4/letter/j/c6cbf5/32.png) [@jaepark](https://forum.inductiveautomation.com/u/jaepark)\
**Post date:** [October 31, 2013, 2:53pm UTC](https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501/3 "2013-10-31T14:53:01Z")

</div>

Take a look at this. It may help.

[viewtopic.php?f=70&t=4935&p=11088&hilit=toborder#p11088](http://www.inductiveautomation.com/forum/viewtopic.php?f=70&t=4935&p=11088&hilit=toborder#p11088)

---

<div class="post-metadata">

**Author:** ![jaepark](https://avatars.discourse-cdn.com/v4/letter/j/c6cbf5/32.png) [@jaepark](https://forum.inductiveautomation.com/u/jaepark)\
**Post date:** [October 31, 2013, 2:59pm UTC](https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501/4 "2013-10-31T14:59:27Z")

</div>

What you can also do is:

On the mouseExited event of the original image

```auto
event.source.border = None
```

Create another image or component and set the border to whatever you want.  
Keep this image/component invisible.

On the mouseEntered event of the original image

```auto
event.source.border = event.source.parent.getComponent('defBorder').border
```

I’m sure there are other ways to accomplish this.

---

<div class="post-metadata">

**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\
**Post date:** [October 31, 2013, 5:58pm UTC](https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501/5 "2013-10-31T17:58:53Z")

</div>

Thanks, I have the None working but i would prefer not to have multiple images and hide/unhide them if possible. I saw in the previous post about there is an expression toBorder, ill check that out

---

<div class="post-metadata">

**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\
**Post date:** [October 31, 2013, 6:34pm UTC](https://forum.inductiveautomation.com/t/enbling-a-border-on-an-image/7501/6 "2013-10-31T18:34:21Z")

</div>

So I used toBorder and a custom property, the mouse over and exit set the custom property to 1 and 0 respectively and then i used an expression binding to set the border.

if({Root Container.Image.borderStyle} = 1, toBorder(“bevel;1010”), toBorder(none))

Thanks for the help guys