jquery change background-image

Estoy tratando de intercambiar dos imágenes con jQuery. Utilizando el evento activable Traté:jquery change background-image

$("#wlt-DealView .buyButton_new").mouseover(function(e){ 
    $('.buyButton_new').css('background-image','url(../images/compra_mouseOver.png)'); 
}); 
$("#wlt-DealView .buyButton_new").mouseout(function(e){ 
    $('.buyButton_new').css('background-image','url(../images/compra_normal.png)'); 
});

Pero la imagen no se muestra y después de obtener el ratón de ella, se pone en marcha el segundo evento. Debería actualizarse con la primera imagen, pero no es así.

Puedes echar un vistazo aquí: http://107.20.186.103/deals/cuerpon.

Pase el botón COMPRAR.

Fuente

2011-10-20 Gigg

Probablemente el camino a las imágenes es incorrecto o las imágenes no se cargan en el servidor – matino

Espera, ¿por qué no haces esto en CSS? – twsaef

Si intento entrar la URL http://107.20.186.103/images/compra_mouseOver.png manualmente en mi navegador, obtengo un 404.

http://107.20.186.103/deals/images/compra_mouseOver.png obtiene un extraño 500 ...

Creo que debería tener preparados sus archivos de imagen y funcionará. También puede modificar su código utilizando la función jQuery.hover.

Fuente

2011-10-20 06:56:57

la ruta relativa funcionaba para el css predeterminado, pero después de que jquery lo actualizara, no funcionaba. Tuve que cambiarlo. Gracias – Gigg

@Iosub Además, ¿tal vez debería considerar cambiar las clases en lugar del css en línea? Al usar estos: '.addClass()' '.removeClass()' '.toggleClass()' Cambiar la clase lo haría más simple ... al menos en mi mente. Además, podría cambiar las URL de la imagen del archivo css. También, googleando por ejemplo: "addclass jquery" le dará instrucciones para jquery api que le dará más información. – Joonas

La sintaxis es la siguiente

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

Fuente

2011-10-20 06:54:56 aperture

Prueba de esto, el código es mejor de todos modos:

$("#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)'); 
    } 
);

Fuente

2011-10-20 06:55:24 JNDPNT

Uso jQuery.hover en lugar de pasar el ratón y mouseOut

Fuente

2011-10-20 06:55:45 twsaef

añadir la ruta de la imagen completa y

$("#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)'); 
    } 
);

Fuente

2011-10-20 07:05:55 Amila

+1, pero debe cambiar la primera imagen a 'compra_mouseOver.png' – Paulpro

que un error. He editado el camino – Amila

La imagen desaparece porque jQuery sustituye a la CSS a nivel local y no desde la hoja de estilos como antes. Por lo tanto, su ruta debe actualizarse para reflejar la ruta desde su archivo HTML a su imagen. Si el archivo HTML se encontraba en la carpeta raíz y "imágenes", una carpeta dentro de esa raíz, el código sería así:

$('.buyButton_new').css('background-image','url(images/compra_mouseOver.png)');

mí en mal estado en un primer momento también.

Fuente

2012-09-10 01:56:04 BrianG

Esta solución me ayudó porque tenía un punto y coma al final de la instrucción url(). Quité el punto y medio y la imagen cambió correctamente. –

Respuesta

Cuestiones relacionadas