# Picture as mouseover text

**URL:** <https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [October 21, 2022, 8:55am UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513 "2022-10-21T08:55:57Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Corne\_de\_Jonge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/corne_de_jonge/32/46823_2.png) [@Corne\_de\_Jonge](https://forum.inductiveautomation.com/u/Corne_de_Jonge)\
**Post date:** [October 21, 2022, 8:55am UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/1 "2022-10-21T08:55:57Z")

</div>

I'm trying to display a picture as mouseover text with vision.  
I figured out using a bit of HTML code such as `<html><img src='file://localhost//C://1.jpg'/>` works fine.

Hoewever, now I want to view a picture from the image management.  
As far as my knowledge goes these are stored in the internal db so I don't have a location path which I can use.

Is there any way to get around this in order to display an image from image management as mouseover text?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 21, 2022, 3:49pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/2 "2022-10-21T15:49:32Z")

</div>

The images in image management are actually automatically hosted by the gateway webserver. You just use the path to the gateway, followed by `/system/images/$yourImage`.

This page is about Perspective's image component, but it relies on the exact same approach:  
[https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Image](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Image)

If you're on 7.9, you'll need to add a `/main`, I think - so `address:port/main/system/images/path/to/image.fileType`.

You may also find these useful:  
[https://docs.inductiveautomation.com/display/DOC81/System+Tags#SystemTags-SystemClientTags(VisionOnly)](https://docs.inductiveautomation.com/display/DOC81/System+Tags#SystemTags-SystemClientTags(VisionOnly))  
[https://docs.inductiveautomation.com/display/DOC81/system.util.getGatewayAddress](https://docs.inductiveautomation.com/display/DOC81/system.util.getGatewayAddress)

---

<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:** [October 21, 2022, 7:20pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/3 "2022-10-21T19:20:28Z")

</div>

I've been experimenting with this, and it took me a while to figure this out using built in icons.

I used this to find the gateway address:  
`print system.util.getGatewayAddress()` and it returned: `http://localhost:8088`,

so naturally, taking the original working code from @Corne_de_Jonge combined with @paul-griffith's suggestion, I tried: `<html><img src='file:http://localhost:8088/system/images/Builtin/icons/24/check2.png'/>`,  
**but that does not work!**

file has to be changed to url, so the final and working code looks like this:  
`<html><img src='url:http://localhost:8088/system/images/Builtin/icons/24/check2.png'/>`  
**The preceding code on a button's _Mouseover Text_ property produces this result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3af309bf2d07af90b19b1f2d57d44fc280a083e5.png)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 21, 2022, 7:23pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/4 "2022-10-21T19:23:08Z")

</div>

You should be able to drop the `url:` prefix.

---

<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:** [October 21, 2022, 7:24pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/5 "2022-10-21T19:24:01Z")

</div>

You are correct @pturmel. I just tested it, and that works as well.

---

<div class="post-metadata">

**Author:** ![Corne\_de\_Jonge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/corne_de_jonge/32/46823_2.png) [@Corne\_de\_Jonge](https://forum.inductiveautomation.com/u/Corne_de_Jonge)\
**Post date:** [December 20, 2022, 2:48pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/6 "2022-12-20T14:48:35Z")

</div>

Just as everything seemed to work perfectly, I encountered a small but challenging problem.

I am now trying to flip the (mouse over) picture in my HTML code. For now I have:

```auto
<html><img src='url:http://localhost:8088/system/images/Builtin/icons/24/check2.png' style='transform:rotate(90deg);'/> 

```

However, it doesn't seem to have affect. Anyone has a clever idea?

---

<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:** [December 20, 2022, 3:01pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/7 "2022-12-20T15:01:08Z")

</div>

Could you create another png file that is already flipped, and link to it instead?

---

<div class="post-metadata">

**Author:** ![Corne\_de\_Jonge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/corne_de_jonge/32/46823_2.png) [@Corne\_de\_Jonge](https://forum.inductiveautomation.com/u/Corne_de_Jonge)\
**Post date:** [December 22, 2022, 7:37am UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/8 "2022-12-22T07:37:20Z")

</div>

That is possible for sure.

However, I'm applying this to a project in which there are a couple of dozen pictures which need to be flipped. It would be a real time saver and neater if we could get this working with a bit of HTML code.

---

<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:** [December 22, 2022, 2:03pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/9 "2022-12-22T14:03:11Z")

</div>

Unfortunately, as I understand it, Vision uses [an antiquated version of HTML](https://www.w3.org/TR/2018/SPSD-html32-20180315/) that offers very little in the way CSS style abilities. There is no "built in" way that I am aware of that can flip the image in the mouseover text.

---

<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:** [December 22, 2022, 4:47pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/10 "2022-12-22T16:47:44Z")

</div>

> [@Corne\_de\_Jonge](#):
>
> Anyone has a clever idea

On that note, I developed a script that will accomplish what you are wanting to do. It reads the stock image, flips it programmatically, and subsequently saves it to the client's cache file. Then, it assigns the html path for the newly created file to the designated mouseover text property.

Here is the result:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/1231e63b27b0a517f971ec6d625588e6b9e256f8.png)

Here is the script:

```auto
from java.awt.image import BufferedImage
from javax.imageio import ImageIO
from java.net import URL
import getpass
username = getpass.getuser()
path = "C:/Users/" + username + "/.ignition/cache/"
url = URL("http://localhost:8088/system/images/Builtin/icons/24/check2.png")
image = ImageIO.read(url)
flipped = BufferedImage(image.getWidth(), image.getHeight(), image.getType())
for x in range(image.getWidth()):
    for y in range(image.getHeight()):
        flipped.setRGB(x, image.getHeight() - y - 1, image.getRGB(x, y))
ImageIO.write(flipped, "png", open(path + "flipped.png", "wb"))
event.source.toolTipText = "<html><img src='file:///" + path + "flipped.png'>"

```

---

<div class="post-metadata">

**Author:** ![Corne\_de\_Jonge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/corne_de_jonge/32/46823_2.png) [@Corne\_de\_Jonge](https://forum.inductiveautomation.com/u/Corne_de_Jonge)\
**Post date:** [December 23, 2022, 12:42pm UTC](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/11 "2022-12-23T12:42:09Z")

</div>

Thanks!

It's a shame that it has to be so complicated due to lack of CSS style abilities, but if we can get it working with this would be great.  
Going to test it soon, will let you know if it works for me too.

UPDATE: We decided to leave it as it is, since we began working on a transition to Perspective.