How to add mouseover event listner to show that Im hovering over a particular image?

Question

so I have used a img tag inside a list tag and I want to use a mouse over event to show on which image Im hovering above

<div class="imgBox"><img src="" alt="" /></div>
<ul class="Thumbnail" id="thumbnail">
  <li>
    <a href="img1.jpg" target="imgBox"
      ><img src="img1.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img2.jpg" target="imgBox"
      ><img src="img2.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img3.jpg" target="imgBox"
      ><img src="img3.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img4.jpg" target="imgBox"
      ><img src="img4.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img5.jpg" target="imgBox"
      ><img src="img5.jpg" width="120px"
    /></a>
  </li>
</ul

score 1 · Answer 1 · answered Mar 22 '22 at 14:39

1

You could use onmouseover html native event on your image element like this

<img onmouseover="yourfunction(this)">

doc

answered Mar 22 '22 at 14:39

pierrefaidherbe

9
2

score 0 · Answer 2 · answered Mar 22 '22 at 14:39

0

You can add "onmouseover ="function(parameter)" to your HTML img element. With this you can point to a JavaScript function that executes whenever you hover over that element.

This page explains how to do so

answered Mar 22 '22 at 14:39

Timon Hueting

71
4

HamiD · Answer 3 · 2022-03-23T09:09:00.277

0

you can do this by using just css :hover :

ul{
  display:flex;
}
li{
  margin:2px;
    }
li>a img:hover{
  border:1px solid red; // <-- here you can change....
}

    <div class="imgBox"><img src="" alt="" /></div>
    <ul class="Thumbnail" id="thumbnail">
      <li>
        <a href="img1.jpg" target="imgBox"
          ><img src="https://picsum.photos/200/300" width="120px"
        /></a>
      </li>
      <li>
        <a href="img2.jpg" target="imgBox"
          ><img src="https://picsum.photos/200/300" width="120px"
        /></a>
      </li>
      <li>
        <a href="img3.jpg" target="imgBox"
          ><img src="https://picsum.photos/200/300" width="120px"
        /></a>
      </li>
    </ul

edited Mar 23 '22 at 09:09

answered Mar 22 '22 at 14:42

HamiD

1,075
1
6
22

can u give me a example on how to define what happens with the target. Im new to html – private_xoxo Mar 22 '22 at 14:59
@private_xoxo There are many ways to "show on which image Im hovering above". You could use `console.log(e.target)`, for example. You'll need to be more clear about how you want to show the image in order to get accurate advice. – Ryan O'D Mar 22 '22 at 15:07
I just want to change the border color of each image when Im hovering over it – private_xoxo Mar 22 '22 at 15:10
I just edited my Code. look if you can use it!? – HamiD Mar 22 '22 at 15:42

Ryan O'D · Answer 4 · 2022-03-22T15:22:08.573

It's worth noting the mouseover event bubbles. If you choose to use this you can just set a single mouseover event listener on the parent element (the <ul>) rather than setting event listeners on every image.

You can do this as follows...

document.getElementById("thumbnail").addEventListener("mouseover", outputImage);

function outputImage(e) {
  e.target.style.borderColor = "// desired color";
}

If you are unfamiliar with event bubbling and capturing, please refer to this SO thread.

Edit: Now that you've mentioned your goal is to change the border color, consider the :hover CSS pseudo-class as others have mentioend.

score 0 · Answer 5 · answered Mar 22 '22 at 15:15

In CSS there is a :hover selector. This would be good if you just wanted to change the appearance of the image when it is hovered over, but if you want to do something more complicated you will want to use JavaScript here. There are many event listeners in JavaScript that could do the trick-- other answers have mentioned mouseover. However, I wouldn't simply put an event listener on each element, as this is a bit inefficient, and if you want to detect more than just the mouse going over (say, scrolling or the mouse leaving), it can get complicated. Instead, you can actually take advantage of CSS's :hover selector in your JavaScript using element.matches(":hover"). Then you can put an event listener on the whole document which triggers a function that checks each image for this property and does something if it has it. Here is what I have made:

document.addEventListener("mousemove", showImage);
document.addEventListener("mouseleave", showImage);
document.addEventListener("scroll", showImage);
function showImage() {
  var items = document.getElementById("thumbnail").getElementsByTagName("li");
  Array.from(items).forEach(function (e) {
    if(e.getElementsByTagName("img")[0].matches(":hover")) {
      //put whatever you want in here
      e.style.backgroundColor = "yellow";
    }
    else {
      //likewise put whatever you want in here
      e.style.backgroundColor = "white";
    }
  });
}

<div class="imgBox"><img src="" alt="" /></div>
<ul class="Thumbnail" id="thumbnail">
  <li>
    <a href="img1.jpg" target="imgBox"
      ><img src="img1.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img2.jpg" target="imgBox"
      ><img src="img2.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img3.jpg" target="imgBox"
      ><img src="img3.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img4.jpg" target="imgBox"
      ><img src="img4.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img5.jpg" target="imgBox"
      ><img src="img5.jpg" width="120px"
    /></a>
  </li>
</ul>

How to add mouseover event listner to show that Im hovering over a particular image?

5 Answers5