Javascript: Using onmouseover and onmouseout functions on more than one image

Question

Edit: Sorry if I reply late to any solutions because I need time to figure out how they work haha

I am a beginner in Javascript and I am currently trying to use this piece of code to change an image on mouseover

// Mouseover change (Ciel):
function rollover(my_image){
    my_image.src = "images/ci2_a.png";
    }

function mouseaway(my_image){
    my_image.src = "images/ci_a.png";
    }

and this is the corresponding HTML

<img src="images/ci_a.png" onmouseover="rollover(this)" onmouseout="mouseaway(this)" alt="xxx" style="float:left; width:38%">
         

This works fine, but I want to do it for more than one image on the same page (a different image rollover for each picture). Even after changing the name of the functions and stuff it doesn't work. The first image stops changing onmouseover immediately when I try to add a similar function for the next image. Could someone tell me how to perform similar events on more than one image (not concurrently)? Thank you!

Answer 1

You could add event listeners to all the image elements you'd like.

<img class="my-image" src="images/ci_a.png" onmouseover="rollover(this)" onmouseout="mouseaway(this)" alt="xxx" style="float:left; width:38%"/>

function rollover(){
  this.src = "images/ci2_a.png";
}

function mouseaway(){
  this.src = "images/ci_a.png";
}

const myImages = document.querySelectorAll('.my-image')
myImages.forEach(img => {
  img.addEventListener('mouseenter', rollover)
  img.addEventListener('mouseleave', mouseaway)
})

Answer 2

You can send the image file as the second parameter like this:

function rollover(element, image) {
  element.src = image
}

...
<img onmouseover="rollover(this, 'images/ci2_a.png')" ...>

But my question is why do you need JavaScript for that? You can use a simple CSS to achieve this.

Answer 3

Since you need different images on load and on hover, you need a single way to define this functionality across a collection of images.

Building on Matthew's approach, here's a way to do that.

JSFiddle to test it real-time.

You'll dynamically generate the images using data attributes to store the alternate (hover) image URL.

<img class="pics" src="https://picsum.photos/id/0/100" 
    data-swap="https://picsum.photos/id/10/100">
<br>
<img class="pics" src="https://picsum.photos/id/1/100" 
    data-swap="https://picsum.photos/id/11/100">
<br>
<img class="pics" src="https://picsum.photos/id/2/100" 
    data-swap="https://picsum.photos/id/12/100">
<br>
<img class="pics" src="https://picsum.photos/id/3/100" 
    data-swap="https://picsum.photos/id/14/100">

Then define the event listeners for all elements with the class pics . Here's a list of all the events that can be referenced.

• On mouseover , store the original image in a data element original .
• Then change the src with the value of the data-swap .
• On mouseout , replace the src with the original value.

const myImages = document.querySelectorAll('.pics')
myImages.forEach(img => {
    img.addEventListener('mouseover', function () {
        img.dataset.original = img.src;
        img.src = img.dataset.swap;
    });
    img.addEventListener('mouseout', function () {
        img.src = img.dataset.original;
    });
})