JQuery in Google Chrome can't find background image

Answer 1

The way I would tackle this is with classes. Have a separate CSS classes for each of the button states, then simply use jQuery to change the class of the button. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this).

<style>
.unclicked {
 ...
}
.unclicked :hover {
 ...
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>
...
$(".CheckoutBt").click( function() {
    $(this).removeClass('unclicked').addClass('clicked');
    ...do what ever action...
});

Answer 2

Try the full "background", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat".

Answer 3

Instead of "background-image" use "backgroundImage"

Answer 4

Ok i've managed to track down the problem. As tvanfosson said it is because WebKit isn't downloading the images. To get around this i just load both images in the unclicked class

<style>
.unclicked {
 background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
 background-image: url('/Portals/_default/images/buttons/checkout-end.gif');
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>

Answer 5

I would also suggest consolidating all your background images into a single image like this. You then use background-position offsets to do your rollover effects. You can exploit this technique even further by making a very long button image (with both its normal and rollover state in it) and left and right align it to produce your 'sliding doors'.