ReplaceWith image on hover

Question

I have an image with white text "angel". I need it to be replaced with red one whenever I keep mouse over it.

<img src="img/angel_word.gif" class="word" id="angelWord">


        <script>
      $("#angelWord").hover(function(){
            $("#angelWord").replaceWith('<img src="img/angel_word_red.gif" class="word" id="angelWord">');
      }, 

      function(){
      $("#angelWord").replaceWith('<img src="img/angel_word.gif" class="word" id="angelWord">');
      });
        </script>`

I am not sure why but it doesnt work. The image becomes red, but when I get my mouse out of it, it stays red. I have also tried with mouseover, but it gives me no results as well:

$("#angelWord").mouseover(function(){
    $("#angelWord").replaceWith('<img src="img/angel_word_red.gif" class="word" id="angelWord">');
});

$("#angelWord").mouseout(function(){
    $("#angelWord").replaceWith('<img src="img/angel_word.gif" class="word" id="angelWord">');
});

Try replacing just the `src` attribute of the image. – rista404 Dec 02 '15 at 20:34 — rista404, Dec 02 '15 at 20:34
@rista404 Works perfectly, thank you! – divHelper11 Dec 02 '15 at 20:36 — divHelper11, Dec 02 '15 at 20:36
I posted a cleaner solution, check it out! :) – rista404 Dec 02 '15 at 20:37 — rista404, Dec 02 '15 at 20:37

score 1 · Answer 1 · answered Dec 02 '15 at 20:36

1

Try mouseenter and mouseleave. It's fired when the cursor first hovers the element and when it goes out of the bounds of the element, respectively.

answered Dec 02 '15 at 20:36

Ivan Cézanne

78
1
11

rista404 · Accepted Answer · 2015-12-02T20:37:56.643

1

Try this:

$('#angelWord').hover(function() {
     $(this).attr("src", "img/angel_word_red.gif");
}, function() {
     $(this).attr("src", "img/angel_word.gif");
});

Cheers!

edited Dec 02 '15 at 20:37

answered Dec 02 '15 at 20:36

rista404

7,639
2
18
20

1

I made it this way and it works, thanks! `$("#angelWord").mouseover(function(){ $("#angelWord").attr("src", "img/angel_word_red.gif") });` – divHelper11 Dec 02 '15 at 20:37

guest271314 · Answer 3 · 2015-12-02T20:44:54.520

1

Try using css background which caches image , avoiding requesting image from server at each hover ; :hover

html

<img class="word" id="angelWord">

css

#angelWord {
  width:50px;
  height:50px;
  background:url(img/angel_word.gif);
}

#angelWord:hover {
  background:url(img/angel_word_red.gif);
}

#angelWord {
  width:50px;
  height:50px;
  background:url(http://lorempixel.com/50/50/nature);
}

#angelWord:hover {
  background:url(http://lorempixel.com/50/50/cats);
}

<img class="word" id="angelWord">

edited Dec 02 '15 at 20:44

answered Dec 02 '15 at 20:39

guest271314

1
15
104
177

No need for that, no additional requests are made once the image is fetched. – rista404 Dec 02 '15 at 20:56
@rista404 _"No need for that, no additional requests are made once the image is fetched."_ Can create jsfiddle http://jsfiddle.net to demonstrate ? – guest271314 Dec 02 '15 at 20:58
Take a look at this for example: http://framerjs.djordjevanjek.com Watch the Network tab in your browser. – rista404 Dec 02 '15 at 20:59
@rista404 _"Take a look at this for example: framerjs.djordjevanjek.com Watch the Network tab in your browser."_ Yes, same image is requested at each hover ? – guest271314 Dec 02 '15 at 21:01
Once fetched, it's in your local storage, no additional http requests are sent. – rista404 Dec 02 '15 at 21:03
@rista404 _"Once fetched, it's in your local storage, no additional http requests are sent."_ Tried with `cache` disabled ? – guest271314 Dec 02 '15 at 21:09
Well i changed the linked picture but didnt change the link and my browser was showing the old one. It means that my browser do not make another requests. But maybe guest271314 is right in some cases so dont argue guys :D – divHelper11 Dec 02 '15 at 21:31
@divHelper11 No worry, just a friendly talk :) – rista404 Dec 03 '15 at 09:48

score 1 · Answer 4 · edited May 23 '17 at 12:30

This isn't working because you're binding the hover handlers to the existing <img> tag, but once you've replaced it with a different <img> tag, the new one doesn't have those handlers any more.

You could re-bind the hover handlers using recursion, but the simpler jQuery answer will be to use the .attr() function and change only the src attribute.

$('#angelWord').hover(
  function () { //In
    $(this).attr('src', 'img/angel_word_red.gif');
  },
  function () { //Out
    $(this).attr('src', 'img/angel_word.gif');
  }
);

Functional example: http://jsfiddle.net/hiljusti/bt1ns62o/2/

If CSS3 is an option, you can also handle this with CSS. (Is it possible to set the equivalent of a src attribute of an img tag in CSS?)

At least as of posting, the CSS solution isn't supported in every modern browser.

Great explaination. Thank you a lot!! – divHelper11 Dec 02 '15 at 21:31 — divHelper11, Dec 02 '15 at 21:31

ReplaceWith image on hover

4 Answers4

Linked