How can I store a string without duplicating it?

Question

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

The error is pretty clear, your not allowed to load local resource `file://` duplication is because your doing `image_product_path+image_product` — Lawrence Cherone, Dec 25 '21 at 16:27
@LawrenceCherone and why it is working on the first time when I hover on it? — Paul Viorel, Dec 25 '21 at 16:29
Use a webserver. Never use *Open file* or just double-clicking an HTML-file in your file manager — connexo, Dec 25 '21 at 16:29
because its originally `src="img/slide-1.jpg"` not `src="/Users/paul/Desktop/Site/img/slide-3.jpg"` — Lawrence Cherone, Dec 25 '21 at 16:30
@LawrenceCherone ```image_product = /img/slide-1``` and ```image_product_path=/Users/paul/Desktop/Site/``` — Paul Viorel, Dec 25 '21 at 16:30
@LawrenceCherone if I do not use like this, it will never go to /img/slide-1, because they are situated in differents folders (I means JS file and images) — Paul Viorel, Dec 25 '21 at 16:32
You just need to think through what each line of code does when first entering and leaving again. What is in which variable after that? — connexo, Dec 25 '21 at 16:35
Toggling two images with css alone would make this far less complicated. If you don't want to load all the images right away loop through and append them after page loads — charlietfl, Dec 25 '21 at 18:04

connexo · Answer 1 · 2021-12-25T16:47:17.307

1

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.

edited Dec 25 '21 at 16:47

answered Dec 25 '21 at 16:41

connexo

53,704
14
91
128

So should I clean Image_product, make it empty again? – Paul Viorel Dec 25 '21 at 17:01
@I'm not going to do the thinking through for you, this is a skill you absolutely **must** acquire if you want to do even trivial programming. – connexo Dec 25 '21 at 17:05
There was no need for Image_product_path, I deleted it and worked, but first time didn't work.. Not sure what I did wrong.. Thanks for trying to help me. – Paul Viorel Dec 25 '21 at 17:19
Yeah, was quite some effort making that table overview, glad it at least helped. Making tables in markdown is not fun :( – connexo Dec 25 '21 at 17:21
Yeah, so sorry about that.. Appreciate your help. Hope in the future I can help people as you did with me. – Paul Viorel Dec 25 '21 at 17:22

score 1 · Accepted Answer · answered Dec 25 '21 at 16:42

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>

Thanks, that worked perfectly. I didn't think about to add a new data in html. — Paul Viorel, Dec 25 '21 at 16:59
This is a really good *solution*, but completely fails to show what OP did wrong. But since OP didn't ask for an explanation, no downvote here. — connexo, Dec 25 '21 at 17:26

score -1 · Answer 3 · answered Dec 25 '21 at 16:36

-1

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);" />

answered Dec 25 '21 at 16:36

Daniil

9
1

Thanks @Daniil but I don't think that help me. I would like to do something dynamic because I will have a lot of cards, and I do not want to spend time on hardcoding. – Paul Viorel Dec 25 '21 at 16:38

How can I store a string without duplicating it?

3 Answers3