jquery change background-image

Question

I'm trying to swap two images with jQuery. Using the hover event I tried:

$("#wlt-DealView .buyButton_new").mouseover(function(e){
    $('.buyButton_new').css('background-image','url(../images/compra_mouseOver.png)');
});
$("#wlt-DealView .buyButton_new").mouseout(function(e){
    $('.buyButton_new').css('background-image','url(../images/compra_normal.png)');
});

But the image is not showing and after I get the mouse from it, it triggers the second event. It should update with the first image, but it doesn't.

You can have a look here: http://107.20.186.103/deals/cuerpon.

Hover the BUY button.

Probably path to your images is wrong or the images are not uploaded to the server — matino, Oct 20 '11 at 06:54

score 28 · Answer 1 · edited Sep 24 '12 at 09:02

28

The image disappears because jQuery replaces the CSS locally and not from your stylesheet as before. So your path needs to be updated to reflect the path from your HTML file to your image. If your HTML file was in your root folder and "images" a folder within that root, the code would be like this:

$('.buyButton_new').css('background-image','url(images/compra_mouseOver.png)');

messed me up at first too.

edited Sep 24 '12 at 09:02

ЯegDwight

24,821
10
45
52

answered Sep 10 '12 at 01:56

BrianG

281
3
3

This solution helped me because I had a semi colon on the end of the url() statement. I removed the semi colon and the image changed correctly. – Craig Howard Apr 13 '14 at 16:02

score 4 · Answer 2 · answered Oct 20 '11 at 06:55

Try this, the code is better anyway:

$("#wlt-DealView .buyButton_new").hover(
    function()
    {
        $(this).css('background-image','url(../images/compra_mouseOver.png)');
    },
    function()
    {
        $(this).css('background-image','url(../images/compra_normal.png)');
    }
);

score 2 · Accepted Answer · answered Oct 20 '11 at 06:56

2

If i try to enter the URL http://107.20.186.103/images/compra_mouseOver.png manually in my browser, i get a 404.

http://107.20.186.103/deals/images/compra_mouseOver.png gets a strange 500...

I think you should get your image files ready and it will work. You may also tweak your code by using the jQuery.hover function.

answered Oct 20 '11 at 06:56

Phil Rykoff

11,999
3
39
63

the relative path was working for the default css, but after jquery was updating it, it wasn't working. I had to change it. Thank's – Gigg Oct 20 '11 at 07:17
2

@Iosub Also, maybe you'd want to consider changing classes instead of the inline css? By using these: `.addClass()` `.removeClass()` `.toggleClass()` Changing class would make it simpler... at least in my mind. Plus you could change the image url's from css file. Also, googling for example: "addclass jquery" will give you directions to jquery api which will give you more information. – Joonas Oct 20 '11 at 07:21

score 1 · Answer 4 · answered Oct 20 '11 at 06:54

1

The syntax is as follows

$(element).hover(function(){
  $(this).css(whatever);
}, function(){
  $(this).css(whatever);
});

answered Oct 20 '11 at 06:54

aperture

2,905
3
35
58

score 1 · Answer 5 · answered Oct 20 '11 at 07:05

1

add the full image path and check

$("#wlt-DealView .buyButton_new").hover(
    function()
    {
        $(this).css('background-image','url(http://107.20.186.103/themes/classic/images/compra_mouseOver.png)');
    },
    function()
    {
        $(this).css('background-image','url(http://107.20.186.103/themes/classic/images/compra_normal.png)');
    }
);

answered Oct 20 '11 at 07:05

Amila

1,423
1
11
17

+1, but you should change the first image to `compra_mouseOver.png` – Paul Oct 20 '11 at 07:08

score 0 · Answer 6 · answered Oct 20 '11 at 06:55

0

Use jQuery.hover instead of mouseover and mouseout

answered Oct 20 '11 at 06:55

twsaef

2,082
1
15
27

jquery change background-image

6 Answers6

Linked