Change image src on the button when hover

Question

I want to change my img src when I hover on the button.

There are few answers that are similar to mine,

but I still can't figure it out.

<button class='Nav' id="Nav_Homepage">
    <img src="./img/Homepage.png" class='img_Nav' id="img_Homepage">
    <label class='lb_Nav'> Homepage </label>
</button>

Best way is to achieve using CSS rather than using JS. Thats how seasoned developer thinks. — NiRUS, May 17 '17 at 06:47
@Nirus you are right, but in my humble knowledge I cannot think of a solution where one would change image src with css only. Please correct me if I am wrong. — Kristijan Iliev, May 17 '17 at 06:57
it could be done if you're using the image as a background though — Mi-Creativity, May 17 '17 at 07:00
@Chris i totally agree with you. But imo i would suggest the OP to change the logic to follow a best possible way rather than sticking with what OP needs when there is best way to achieve the same. — NiRUS, May 17 '17 at 07:03

Super User · Accepted Answer · 2017-05-17T07:39:55.760

8

You can do this using CSS

#Nav_Homepage span {
  background: url(https://dummyimage.com/20x20/000/fff.png&text=P) no-repeat;
  width: 20px;  /* your image width */
  height: 20px; /* your image height */
  display: inline-block;
}
#Nav_Homepage label {
  display: inline-block;
}
#Nav_Homepage:hover span {
  background: url(https://dummyimage.com/20x20/ff0000/ffffff.png&text=H) no-repeat;
}

<button class='Nav' id="Nav_Homepage">
    <span class='img_Nav'></span>
    <label class='lb_Nav'> Homepage </label>
</button>

edited May 17 '17 at 07:39

answered May 17 '17 at 06:46

Super User

9,448
3
31
47

Thx! It worked by just using CSS! – Lee May 17 '17 at 07:06
Out of curiosity, what is the main difference between property "background" and "background-image"? – Lee May 17 '17 at 07:16
@Lee if you use `background-image` then you have to used `background-repeat`, `background-position` separate if you don't use exact size image which you are using in `width` & `height` tag – Super User May 17 '17 at 07:18

score 6 · Answer 2 · answered May 17 '17 at 06:47

6

if you have new image source just use this code. use this method if you want change image with more than one images.

$('#btn_id')

.on('mouseenter', function() {
    $('#img_Homepage').attr('src', 'url_of_new_image');
})

.on('mouseleave', function() {
    $('#img_Homepage').attr('src', 'url_of_old_image');
});

answered May 17 '17 at 06:47

Farsheed Feeruzy

175
1
10

Thx! This works as well, but I prefer using CSS. Again, thank you! – Lee May 17 '17 at 07:07

athi · Answer 3 · 2017-05-17T07:00:55.320

3

$(document).ready(function() {
  $("#Nav_Homepage").mouseenter(function() {
    $(this).children('img').attr("src", "./img/newimage.png");
  });
  $("#Nav_Homepage").mouseleave(function() {
    $(this).children('img').attr("src", "./img/Homepage.png");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class='Nav' id="Nav_Homepage">
    <img src="./img/Homepage.png" class='img_Nav' id="img_Homepage">
    <label class='lb_Nav'> Homepage </label>
</button>

edited May 17 '17 at 07:00

answered May 17 '17 at 06:47

athi

1,683
15
26

This has 2 issues, **first** `$(this)` refers to `#Nav_Homepage` which is the button here not the image in it. **Second** you are only changing the image `src` on `mousover` and not changing it back to the original image when the mouse leaves – Mi-Creativity May 17 '17 at 06:57
1

Thanks! Have updated the code. – athi May 17 '17 at 07:01

Change image src on the button when hover

3 Answers3