Geek Answers Handbook

JQuery in Google Chrome cannot find background image

I have a button that I want to change the background to show that it is disabled when the user clicks on it. It works fine in IE / FF, but in chrome it seems like it cannot find the background image and does nothing in the background.

alt text

I just make a simple css set in jQuery 1.2.6

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");
+4
source share
5 answers

Well, I managed to identify the problem. As tvanfosson said, this is because WebKit does not load images. To get around this, I just load both images in an 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>
+5
source

The way I do this is the classes. Have separate CSS classes for each of the button states, and then just use jQuery to change the button class. This ensures that all images are actually uploaded and accessible when you set the class - in which I think Chrome is not working (probably all WebKit browsers will 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... });
+1
source

Instead of "background-image" use "backgroundImage"

+1
source

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

0
source

I would also suggest combining all your background images into a single image like this . Then you use background-position offsets to fulfill your rollover effects. You can use this technique even more by creating a very long button image (with its normal and tilting state), and align it to the left and right to create “sliding doors”.

0
source

More articles:


All Articles