JQuery en Google Chrome no puede encontrar la imagen de fondo

Question

Tengo un botón del que quiero cambiar el fondo para mostrar que está deshabilitado cuando un usuario hace clic en él. Funciona bien en IE / FF, pero en Chrome parece que no puede encontrar la imagen de fondo y no hace que el fondo sea nada.

??

Solo estoy haciendo un conjunto simple de CSS en jQuery 1.2.6

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

Answer 1

Ok, he logrado localizar el problema. Como dijo tvanfosson, es porque WebKit no está descargando las imágenes. Para evitar esto, simplemente cargo ambas imágenes en la clase no clicada

<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 2

La forma en que abordaría esto es con las clases. Tenga clases de CSS separadas para cada uno de los estados del botón, luego simplemente use jQuery para cambiar la clase del botón. Esto aseguraría que todas las imágenes se descarguen realmente y estén disponibles cuando establezca la clase, que es donde creo que Chrome está fallando (probablemente todos los navegadores WebKit harían esto).

<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 3

En lugar de " background-image " use " backgroundImage "

Answer 4

Pruebe la url completa de "fondo", " (/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat " ;.

Answer 5

También sugeriría consolidar todas sus imágenes de fondo en una sola imagen así . Luego usa los desplazamientos de background-position para hacer sus efectos de rollover. Puede explotar esta técnica aún más haciendo una imagen de botón muy larga (con su estado normal y de desplazamiento) y alinearla de izquierda a derecha para producir sus 'puertas correderas'.