将鼠标悬停在卡片上时，我可以更改卡片的图像。 但是对于大量具有不同图像的卡片，我该怎么做

Question

Here is an html sample for one card:

        <div class="col s4">
          <div class="card">
            <div class="card-image">
              <img src="img/forZane/Bowl_Andrew (1).jpg" onmouseover="hover(this);" onmouseout="unhover(this);">
            </div>
            <div class="card-content">
              <h4 class="md-font">ceramic one.</h4>
              <p class="md-font">$50.</p>
            </div> 
          </div>
        </div>

and this is the javascript that i'm using:

  element.setAttribute('src', 'img/forZane/Bowl_Andrew (2).jpg');
}

function unhover(element) {
  element.setAttribute('src', 'img/forZane/Bowl_Andrew (1).jpg');
}

I can't figure out how to apply this function/hover technique to different cards with different images.

Any help would be greatly appreciated.

Answer 1

You can do this for multiple images by introducing a new parameter to your functions that set the image url to that value:

 function hover(element, url) element.setAttribute('src', url); } function unhover(element, url) { element.setAttribute('src', url); }

 <div class="col s4"> <div class="card"> <div class="card-image"> <img src="img/forZane/Bowl_Andrew (1).jpg" onmouseover="hover(this, 'img/forZane/Bowl_Andrew (2).jpg');" onmouseout="unhover(this, 'img/forZane/Bowl_Andrew (1).jpg');"> </div> <div class="card-content"> <h4 class="md-font">ceramic one.</h4> <p class="md-font">$50.</p> </div> </div> <div class="card"> <div class="card-image"> <img src="img/AnotherImage.jpg" onmouseover="hover(this, 'img/AnotherImageHover.jpg');" onmouseout="unhover(this, 'img/AnotherImage.jpg');"> </div> <div class="card-content"> <h4 class="md-font">wodden one.</h4> <p class="md-font">$70.</p> </div> </div> </div>

That way, you can have the same effect among multiple images.

Answer 2

You can add custom data-* attributes to your img tags, so that your hover / unhover functions can change the image in each case.

Take this for example:

 function hover(element) { element.setAttribute('src', element.getAttribute('data-hover')); } function unhover(element) { element.setAttribute('src', element.getAttribute('data-unhover')); }

 <div class="col s4"> <div class="card"> <div class="card-image"> <img src="img (1).jpg" data-hover="img (2).jpg" data-unhover="img (1).jpg" onmouseover="hover(this);" onmouseout="unhover(this);"> </div> <div class="card-content"> <h4 class="md-font">ceramic one.</h4> <p class="md-font">$50.</p> </div> </div> </div> <div class="col s4"> <div class="card"> <div class="card-image"> <img src="img (1).jpg" data-hover="img (2).jpg" data-unhover="img (1).jpg" onmouseover="hover(this);" onmouseout="unhover(this);"> </div> <div class="card-content"> <h4 class="md-font">ceramic one.</h4> <p class="md-font">$50.</p> </div> </div> </div>

If your filenames are indeed in a consistent format, and all you need to do is switch between filenames ending in "(1)" and "(2)", consider the following alternative.

Here, we remove the data-* attributes, and instead do a replacement of the src attribute.

 function hover(element) { element.setAttribute('src', element.getAttribute('src').replace('(1)', '(2)')); } function unhover(element) { element.setAttribute('src', element.getAttribute('src').replace('(2)', '(1)')); }

 <div class="col s4"> <div class="card"> <div class="card-image"> <img src="img (1).jpg" onmouseover="hover(this);" onmouseout="unhover(this);"> </div> <div class="card-content"> <h4 class="md-font">ceramic one.</h4> <p class="md-font">$50.</p> </div> </div> </div> <div class="col s4"> <div class="card"> <div class="card-image"> <img src="img (1).jpg" onmouseover="hover(this);" onmouseout="unhover(this);"> </div> <div class="card-content"> <h4 class="md-font">ceramic one.</h4> <p class="md-font">$50.</p> </div> </div> </div>