# Adding "mouseover" listener to images in dashboard

**URL:** https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466
**Category:** Dashboard
**Created:** [11 January 2022 13:06 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466 "2022-01-11T13:06:42Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![moryoav](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moryoav/32/17385_2.png) [@moryoav](https://discourse.nodered.org/u/moryoav)
#### Post date: [11 January 2022 13:06 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/1 "2022-01-11T13:06:42Z")

</div>

I have a dashboard with many images (placed inside a ui-table, if it matters), I'm looking to add a "mouseover" listener, using a template node, so that each image will send a msg when the mouse is over it. This doesn't work unfortunately. Here's my template node code, any assistance will be greatly appreciated.

```auto
<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            console.dir(data);
            const galleryimages = document.getElementsByTagName('img');

            Array.from(galleryimages).forEach((image, index) => {

                image.addEventListener('mouseover', event => {
                    console.log(`Image ${index}`);
                    send({payload: ${index}});
                })
            });
        });
    })(scope);
</script>

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [11 January 2022 13:31 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/2 "2022-01-11T13:31:43Z")

</div>

Move the `addEventListener` outside of the watch otherwise each time a message is sent to the ui-template, you will add more listeners.

something like ...

```auto
<script>
    (function(scope) {
        const _scope = scope;

        const galleryimages = document.getElementsByTagName('img');
        console.log("galleryimages: ", galleryimages );
        Array.from(galleryimages).forEach((image, index) => {
            image.addEventListener('mouseover', event => {
                console.log(`Image ${index}`);
                _scope.send({payload: ${index}});
            })
        });

        scope.$watch('msg.payload', function(msg) {
            console.log("msg", msg);
            if(msg && msg.topic == "control") {
               //do something with the msg.payload!
            }            
        });
    })(scope);
</script>

```

(untested)

---

<div class="post-metadata">

### Author: ![moryoav](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moryoav/32/17385_2.png) [@moryoav](https://discourse.nodered.org/u/moryoav)
#### Post date: [11 January 2022 14:05 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/3 "2022-01-11T14:05:14Z")

</div>

That was actually intentional, each time a message is sent to this node there are new images. So it's indeed needed to run this script every time a message is received.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [11 January 2022 14:07 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/4 "2022-01-11T14:07:51Z")

</div>

Ok, so are you getting any errors or console logs in browser console?

---

<div class="post-metadata">

### Author: ![moryoav](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moryoav/32/17385_2.png) [@moryoav](https://discourse.nodered.org/u/moryoav)
#### Post date: [11 January 2022 14:15 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/5 "2022-01-11T14:15:41Z")

</div>

Back to my original script, I've replaced the send with a simple 'alert', just to see if I'm getting anything (I'm not). In the console I'm getting printouts of 'Image 1', 'Image 2', etc., that come from the line before the addListener, so the script sees the array of images, but nothing happens after that.  
Also, not sure if this is the correct way to look at it, but when I "inspect" one of the images, go to Properties, then onmouseover:null, I'm guessing that's not right.

```auto
<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            console.dir(data);
            const galleryimages = document.getElementsByTagName('img');

            Array.from(galleryimages).forEach((image, index) => {
                console.log('Image '+index);
                image.addEventListener('mouseover', event => {
                    //console.log(`Image ${index}`);
                    //send({payload: '${index}'});
                    alert('here');
                })
            });
        });
    })(scope);
</script>

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [12 January 2022 10:12 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/6 "2022-01-12T10:12:45Z")

</div>

Out of curiosity, does it work if you use jQuery (jQuery is available in dashboard)

```auto
<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            console.dir(data);
            $('img').off("mouseover"); //remove any existing evt handlers
            $('img').on("mouseover", function(event) {
                 scope.send({payload: event});
            });
        });
    })(scope);
</script>

```

**again - untested ( but confident 😉 )**

---

<div class="post-metadata">

### Author: ![moryoav](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moryoav/32/17385_2.png) [@moryoav](https://discourse.nodered.org/u/moryoav)
#### Post date: [12 January 2022 10:38 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/7 "2022-01-12T10:38:36Z")

</div>

That works! And lastly, now in the "scope.send", how would I go about sending the img.src? So I'll know what I'm hovering over, because otherwise I don't see that "event" holds any information on what the hover is on. Thank you!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [12 January 2022 10:45 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/8 "2022-01-12T10:45:30Z")

</div>

Since i used a std function instead of arrow function, `this` should be the object that was `mouseover`ed. In theory, you can then access any property of the `img` element using `$(this).prop("_prop_name_")` or any data value you added to the `img` using `$(this).data("_data_item_name_")` and build whatever payload you desire.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [12 January 2022 10:47 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/9 "2022-01-12T10:47:24Z")

</div>

> [@moryoav](#):
>
> how would I go about sending the img.src?

`scope.send({payload: $(event.target).attr('src')});`

---

<div class="post-metadata">

### Author: ![moryoav](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moryoav/32/17385_2.png) [@moryoav](https://discourse.nodered.org/u/moryoav)
#### Post date: [12 January 2022 10:55 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/10 "2022-01-12T10:55:12Z")

</div>

Everything works great, thanks everyone!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [12 January 2022 10:59 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/11 "2022-01-12T10:59:19Z")

</div>

Good stuff.

I'm pleased @hotNipi got the " solution" since your original question was `Adding "mouseover" listener to images in dashboard`😂😂😂

_Only kidding BTW_

---

<div class="post-metadata">

### Author: ![moryoav](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moryoav/32/17385_2.png) [@moryoav](https://discourse.nodered.org/u/moryoav)
#### Post date: [12 January 2022 14:23 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/12 "2022-01-12T14:23:21Z")

</div>

Actually you got the "solution"... I tried to give it to the both of you but couldn't, so you got it because that was indeed my original question... 🙂

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [12 January 2022 14:24 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/13 "2022-01-12T14:24:50Z")

</div>

It was a joke I'm sure you realise? (And I have plenty solutions anyhow 😂😂😂).

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [26 January 2022 14:25 UTC](https://discourse.nodered.org/t/adding-mouseover-listener-to-images-in-dashboard/56466/14 "2022-01-26T14:25:30Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.