# Show a highlighted border on mouse over

**URL:** <https://forum.inductiveautomation.com/t/show-a-highlighted-border-on-mouse-over/77779>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [August 12, 2023, 12:11am UTC](https://forum.inductiveautomation.com/t/show-a-highlighted-border-on-mouse-over/77779 "2023-08-12T00:11:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harrison\_Ting](https://avatars.discourse-cdn.com/v4/letter/h/48db29/32.png) [@Harrison\_Ting](https://forum.inductiveautomation.com/u/Harrison_Ting)\
**Post date:** [August 12, 2023, 12:11am UTC](https://forum.inductiveautomation.com/t/show-a-highlighted-border-on-mouse-over/77779/1 "2023-08-12T00:11:24Z")

</div>

This should be very simple but I'm struggling with it. Converting from another HMI product where this is automatic on any object that have a clickable action associated with it. Basically I want any object, be that a square or a grouped object to show a border when I mouse over it.

with a rectangle, I tried with scripting on SetProperty to {$.strokePaint} on MouseEntered event but then I got stuck. Not sure how to format the color value. I'm not even sure I'm on the right path.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [August 14, 2023, 12:23am UTC](https://forum.inductiveautomation.com/t/show-a-highlighted-border-on-mouse-over/77779/2 "2023-08-14T00:23:23Z")

</div>

This is something that would normally be done from mouse entered and exited event handlers, but expression language won't work there; you will have to use Jython to script it. Normally, I would create a [template](https://docs.inductiveautomation.com/display/DOC81/Vision+Templates) for something like this, so I could use it everywhere and only have to upgrade it or make changes to it in one place.

**Edit:**  
Here is a simple example:  
[rectangle.zip](https://forum.inductiveautomation.com/uploads/short-url/hBkGcPezTIBHGhpY5cNH3qxCEpl.zip) (2.9 KB)

When in preview mode or in a session, the border will change to orange when the mouse enters the rectangle, and it will change back to black when the mouse exits.

```auto
#mouseEntered:
event.source.strokePaint = system.gui.color('orange')

#mouseExited:
event.source.strokePaint = system.gui.color('black')

```

---

<div class="post-metadata">

**Author:** ![zbinder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zbinder/32/28918_2.png) [@zbinder](https://forum.inductiveautomation.com/u/zbinder)\
**Post date:** [August 14, 2023, 12:34pm UTC](https://forum.inductiveautomation.com/t/show-a-highlighted-border-on-mouse-over/77779/3 "2023-08-14T12:34:05Z")

</div>

I've also created an exchange resource that will make the border visible or invisible when the mouse hovers over it. I've usually embedded it inside other templates.

> **[Ignition Exchange](https://inductiveautomation.com/exchange/2498/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

---

<div class="post-metadata">

**Author:** ![Harrison\_Ting](https://avatars.discourse-cdn.com/v4/letter/h/48db29/32.png) [@Harrison\_Ting](https://forum.inductiveautomation.com/u/Harrison_Ting)\
**Post date:** [August 14, 2023, 11:59pm UTC](https://forum.inductiveautomation.com/t/show-a-highlighted-border-on-mouse-over/77779/4 "2023-08-14T23:59:13Z")

</div>

Thanks both, I'm taking the easier route (for me) this time and use the justin's solution and I'll take a look at the template later when I get more time. A lot to learn in this new environment.