How to change image source on hover using javascript, but applies to each individual photo

Question

I would like to change the image source of each image when it is hovered. I will have the original url that exists before the hover (represented by yes.png), and the new url that exists after the hover (represented by yes2.png). The whole point is that the new url is the same as the original except a 2 is added to it on hover. And I would like this done in javascript. I'm new at javascript, but how do I add onto this?

The whole thing that makes this different is that the source of the image is different for each image, yet it works for every image.

var url = getElementsByClassName ('card-img-top').src
var newImg = url+2

Do you want all the images to change src if any image is hovered over? — Cory Kleiser, Jun 08 '18 at 03:18

Cory Kleiser · Accepted Answer · 2018-06-08T03:36:21.687

You can do this relatively easily. You can find where .png is in the string and insert a 2 before it on mouseenter and remove the 2 on mouseout.

I'm not sure if you just want the image that is being hovered over to change or all images so I'll include an example of how to do both. First and probably what you are looking for I'll change only the image that is being hovered over:

const imgs = document.getElementsByTagName('img');

[...imgs].forEach(img => {
  img.addEventListener('mouseenter', () => {
    const newSrc = img.src.slice(0, img.src.indexOf('.png')) + 2 + img.src.slice(img.src.indexOf('.png'));
    console.log(newSrc);
    img.src = newSrc;
  })
  img.addEventListener('mouseout', () => {
    const newSrc = img.src.slice(0, img.src.indexOf('.png') - 1) + img.src.slice(img.src.indexOf('.png'));
    console.log(newSrc);
    img.src = newSrc;
  })
});

img {
  height: 100px;
  width: 100px;
}

<img src="pic.png">
<img src="img.png">

Second I'll change the src of all img tags whenever one is hovered over:

const imgs = document.getElementsByTagName('img');

[...imgs].forEach(img => {
  img.addEventListener('mouseenter', () => {
    [...imgs].forEach(img => {
      const newSrc = img.src.slice(0, img.src.indexOf('.png')) + 2 + img.src.slice(img.src.indexOf('.png'));
      console.log(newSrc);
      img.src = newSrc;
    })
  })
  img.addEventListener('mouseout', () => {
    [...imgs].forEach(img => {
      const newSrc = img.src.slice(0, img.src.indexOf('.png') - 1) + img.src.slice(img.src.indexOf('.png'));
      console.log(newSrc);
      img.src = newSrc;
    })
  })
});

img {
  height: 100px;
  width: 100px;
}

<img src="pic.png">
<img src="img.png">

Works perfectly. Thank you so much! – lexi b Jun 09 '18 at 02:00 — lexi b, Jun 09 '18 at 02:00
@lexib glad I could help. Happy Coding :) – Cory Kleiser Jun 09 '18 at 02:13 — Cory Kleiser, Jun 09 '18 at 02:13

Barmar · Answer 2 · 2018-06-08T03:18:36.797

Add listeners for the mouseover and mouseout events.

getElementsByClassName returns a collection, you have to loop over it to add handlers for all the elements.

const cards = getElementsByClassName('card-img-top');
Array.from(cards).forEach(card => {
    card.addEventListener("mouseover", function() {
        let url = this.src;
        let newImg = url + "2";
        this.src = newImg;
    });
    card.addEventListener("mouseout", function() {
        let url = this.src;
        let newImg = url.substr(0, -1);
        this.src = newImg;
    });
});

score 0 · Answer 3 · answered Jun 08 '18 at 03:00

0

Not sure why you are changing the source. However, could you try using a sprite as the background image and change background position with :hover css pseudo-selector

This another SO question could help you: Creating CSS Sprite :hover Roll Over Image Links

answered Jun 08 '18 at 03:00

Thiago Furtado

108
7

Oh! I'm changing the source because the images are previews of a product. Typically there is a second image of the product when you hover on the image. Thanks. – lexi b Jun 08 '18 at 03:02

How to change image source on hover using javascript, but applies to each individual photo

3 Answers3