There are 2 cards panels, and I would like to change the image of the card when I hover over it, then when I leave it I want to come back to the initial image.

First time it works for each image, but when I try to hover second time it duplicates my string where I store the path..

HTML CODE

<div >
                        <div ">
                            <img src="img/slide-1.jpg"  alt="...">
                            <div >
                            <h5 >Image 1</h5>
                            </div>
                        </div>
                    </div>
<div >
                        <div ">
                            <img src="img/slide-1.jpg"  alt="...">
                            <div >
                            <h5 >Image 2</h5>
                            </div>
                        </div>
                    </div>

JQUERY CODE

(function ($) {
    "use strict"; // Start of use strict
    var image_product;
    var image_product_path="/Users/paul/Desktop/Site/";
    $(".card-img-top").on({
        mouseenter: function () {
            image_product = $(this).attr("src");
            $(this).attr("src","/Users/paul/Desktop/Site/img/slide-3.jpg");
            
        },
        mouseleave: function () {
            $(this).attr("src",image_product_path image_product);
        }
    });

  
  })(jQuery); // End of use strict

The error that is triggered second time when I try to hover over the cards: [Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg

The error that is triggered third time when I try to hover over the cards: [Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg AND SO ON

CodePudding user response：

There are n cards panels, and I would like to change the image of the card when I hover over it, then when I leave it I want to come back to the initial image.

Set the original image into a data attribute, then on mouse out switch it back.

(function($) {
  $(".card-img-top").on({
    mouseenter: function() {
      $(this).data('original', $(this).attr("src"));
      $(this).attr("src", "https://via.placeholder.com/300/09f/000.png");
    },
    mouseleave: function() {
      $(this).attr("src", $(this).data('original'));
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <img src="https://via.placeholder.com/300/09f/fff.png"  alt="... ">
    <div >
      <h5 >Image 1</h5>
    </div>
  </div>
</div>

If you want a different image for each different card then set it into a data attribute.

(function($) {
  $(".card-img-top").on({
    mouseenter: function() {
      $(this).data('original', $(this).attr("src"));
      $(this).attr("src", $(this).data('hover-image'));
    },
    mouseleave: function() {
      $(this).attr("src", $(this).data('original'));
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <img src="https://via.placeholder.com/100/09f/fff.png" data-hover-image="https://via.placeholder.com/100/09f/000.png"  alt="... ">
    <div >
      <h5 >Image 1</h5>
    </div>
  </div>
</div>

<div >
  <div >
    <img src="https://via.placeholder.com/100/07f/aaa.png" data-hover-image="https://via.placeholder.com/100/05f/333.png"  alt="... ">
    <div >
      <h5 >Image 2</h5>
    </div>
  </div>
</div>

CodePudding user response：

Here's what the src attribute and your image_product variable contain at the different phases:

In your handlers functions, you keep storing whatever is in src into image_product when the mouse enters.

The second time you mouseenter, image_product already contains the full path, but in your mouseleave function you keep prepending the path every time.

CodePudding user response：

Please check a link https://stackoverflow.com/a/18032363/3526623

The solution from the link above without Jquery

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}


<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onm ouseover="hover(this);" onm ouseout="unhover(this);" />