JQuery in Google Chrome can't find background image

StackOverflow https://stackoverflow.com/questions/609168

  •  03-07-2019
  •  | 
  •  

Question

I have a button that I want to change the background of to show that it is disabled when a user clicks on it. It works fine in IE/FF but in chrome it seems that it can't find the background image and makes the background nothing.

alt text

I am just doing a simple css set in jQuery 1.2.6

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");
Was it helpful?

Solution

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>

OTHER TIPS

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

Instead of "background-image" use "backgroundImage"

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

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'.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top