Html Question posted in
Some basic documentation can be found here.

Implementing image hover behavior of multiple images in JavaScript within an HTML page

I searched for a way to change all the images in a row when hovering, but I could not find any; I used the following script in which I want to loop through the images and change them. Is it possible in this way? Is there a better way?

let imageSources = ["images/cat1.jpg", "images/cat2.jpg", "images/cat3.jpg"];

let images = document.querySelectorAll('.img-fluid.img-thumbnail');

function changeImg(index) {
  return function() {
    images[index - 1].src = imageSources[index];
  };
}

function restoreImg(index) {
  return function() {
    images[index - 1].src = "images/frozen.jpg";
  };
}

images.forEach(function(index) {
      image[index].addEventListener('mouseover', changeImage(index));
      image[index].addEventListener('mouseout', restoreImage(index));
    };
<div class="row">
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="">
  </div>
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="">
  </div>
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="">
  </div>
</div>

I tried in multiple ways, but the images do not change when I hover over them.

Tags:

2

Answers


  1. 0

    You could add the "hover images" to the HTML itself and then show/hide the images using hover in CSS. Advantages are that all images are loaded from the start and you don’t need to change the DOM.

    .img-thumbnail {
  width: 100px;
  height: 100px;
  display: block;
}

.col-md-4 img:nth-child(2) {
  display: none;
}

.col-md-4:hover img:nth-child(2) {
  display: block;
}

.col-md-4:hover img:nth-child(1) {
  display: none;
}
    <div class="row">
  <div class="col-md-4">
    <img src="https://via.placeholder.com/100/09f/fff.png" class="img-fluid img-thumbnail mb-4" alt="frozen">
    <img src="https://via.placeholder.com/100/07a/fff.png" class="img-fluid img-thumbnail mb-4" alt="ca1">
  </div>
  <div class="col-md-4">
    <img src="https://via.placeholder.com/100/09f/fff.png" class="img-fluid img-thumbnail mb-4" alt="frozen">
    <img src="https://via.placeholder.com/100/092/fff.png" class="img-fluid img-thumbnail mb-4" alt="cat2">
  </div>
  <div class="col-md-4">
    <img src="https://via.placeholder.com/100/09f/fff.png" class="img-fluid img-thumbnail mb-4" alt="frozen">
    <img src="https://via.placeholder.com/100/56a/fff.png" class="img-fluid img-thumbnail mb-4" alt="cat3">
  </div>
</div>

    Now, I don’t know if the images are important to the semantics of the HTML. If not and the images are just used as icons you could move alle the images to the CSS:

    .col-md-4 {
  width: 100px;
  height: 100px;
  display: block;
  background-image: url('https://via.placeholder.com/100/09f/fff.png');
}

.col-md-4.cat1:hover {
  background-image: url('https://via.placeholder.com/100/07a/fff.png');
}

.col-md-4.cat2:hover {
  background-image: url('https://via.placeholder.com/100/092/fff.png');
}

.col-md-4.cat3:hover {
  background-image: url('https://via.placeholder.com/100/56a/fff.png');
}
    <div class="row">
  <div class="col-md-4 cat1">cat1</div>
  <div class="col-md-4 cat2">cat2</div>
  <div class="col-md-4 cat3">cat3</div>
</div>
    Login or Signup to reply.
  2. 0

    hi dear i fix your code base your requirement.

      <div class="row">
<div class="col-md-4">
    <img src="images/frozen.jpg"  class="img-fluid img-thumbnail mb-4" alt="a">
</div>
<div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="b">
</div>
<div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="c">
</div>  

       const orignalImage = ["images/frozen.jpg", "images/frozen.jpg", "images/frozen.jpg"];

   const imageSources = ["images/cat1.jpg", "images/cat1.jpg", ".images/cat1.jpg"];
                    
                    let images = document.querySelectorAll('.img-fluid.img-thumbnail');

                  
                    function changeImg(event, index) {
                    
                     event.target.src= imageSources[index];
                      
                        
                    }

                    function restoreImg(event, index) {
                      event.target.src= orignalImage[index];
                    }

                    
                    images.forEach(function(element,index) {
                      element.addEventListener('mouseout', e=>restoreImg(e, index));
                        element.addEventListener('mouseover', e=>changeImg(e, index));
                      
                      });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search