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 class="col-lg d-flex justify-content-center mb-4">
<div class="card border-0"">
<img src="img/slide-1.jpg" class=" card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Image 1</h5>
</div>
</div>
</div>
<div class="col-lg d-flex justify-content-center mb-4">
<div class="card border-0"">
<img src="img/slide-1.jpg" class=" card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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
Here's what the src attribute and your image_product variable contain at the different phases:
| Phase | src | image_product |
|---|---|---|
| before first run | img/slide-1.jpg |
undefined |
| first mouseenter | /Users/paul/Desktop/Site/img/slide-3.jpg |
img/slide-1.jpg |
| first mouseleave | /Users/paul/Desktop/Site/img/slide-1.jpg |
img/slide-1.jpg |
| 2nd mouseenter | /Users/paul/Desktop/Site/img/slide-3.jpg |
/Users/paul/Desktop/Site/img/slide-3.jpg |
| 2nd mouseleave | /Users/paul/Desktop/Site/Users/paul/Desktop/Site/img/slide-1.jpg |
/Users/paul/Desktop/Site/img/slide-3.jpg |
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.
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 class="col-lg d-flex justify-content-center mb-4">
<div class="card border-0">
<img src="https://via.placeholder.com/300/09f/fff.png" class=" card-img-top " alt="... ">
<div class="card-body ">
<h5 class="card-title ">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 class="col-lg d-flex justify-content-center mb-4">
<div class="card border-0">
<img src="https://via.placeholder.com/100/09f/fff.png" data-hover-image="https://via.placeholder.com/100/09f/000.png" class=" card-img-top " alt="... ">
<div class="card-body ">
<h5 class="card-title ">Image 1</h5>
</div>
</div>
</div>
<div class="col-lg d-flex justify-content-center mb-4">
<div class="card border-0">
<img src="https://via.placeholder.com/100/07f/aaa.png" data-hover-image="https://via.placeholder.com/100/05f/333.png" class=" card-img-top " alt="... ">
<div class="card-body ">
<h5 class="card-title ">Image 2</h5>
</div>
</div>
</div>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" onmouseover="hover(this);" onmouseout="unhover(this);" />