CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gigg
Gigg

Reputation: 1049

jquery change background-image

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.

Upvotes: 22

Views: 93388

Answers (6)

BrianG
BrianG

Reputation: 291

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.

Upvotes: 29

Amila
Amila

Reputation: 1423

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)');
    }
);

Upvotes: 1

Phil Rykoff
Phil Rykoff

Reputation: 12097

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.

Upvotes: 2

twsaef
twsaef

Reputation: 2121

Use jQuery.hover instead of mouseover and mouseout

Upvotes: 0

JNDPNT
JNDPNT

Reputation: 7465

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)');
    }
);

Upvotes: 4

aperture
aperture

Reputation: 2895

The syntax is as follows

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

Upvotes: 1

Related Questions