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\         


        

Answer 1

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.

Answer 2

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

Answer 3

Use jQuery.hover instead of mouseover and mouseout

Answer 4

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.

Answer 5

The syntax is as follows

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

Answer 6

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