jquery change background-image

Sto provando a scambiare due immagini con jQuery. Utilizzando l'evento hover ho provato: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)'); 
});

Ma l'immagine non è che mostra e dopo che ottengo il mouse da esso, si innesca il secondo evento. Dovrebbe essere aggiornato con la prima immagine, ma non è così.

Potete dare un'occhiata qui: http://107.20.186.103/deals/cuerpon.

Passare il mouse sul pulsante BUY.

fonte

2011-10-20 Gigg

Probabilmente il percorso delle immagini è errato o le immagini non sono caricate sul server – matino

Aspetta, perché non lo stai facendo in CSS? – twsaef

se provo ad entrare l'URL http://107.20.186.103/images/compra_mouseOver.png manualmente nel mio browser, ottengo un 404.

http://107.20.186.103/deals/images/compra_mouseOver.png ottiene uno strano 500 ...

Penso che dovresti ottenere i file immagine pronti e funzionerà. Puoi anche modificare il codice usando la funzione jQuery.hover.

fonte

2011-10-20 06:56:57

il percorso relativo funzionava per il css predefinito, ma dopo che jquery lo stava aggiornando, non funzionava. Ho dovuto cambiarlo. Grazie – Gigg

@Iosub Inoltre, potresti prendere in considerazione la possibilità di modificare le classi anziché i css in linea? Usando questi: '.addClass()' '.removeClass()' '.toggleClass()' Cambiare classe lo renderebbe più semplice ... almeno nella mia mente. Inoltre è possibile modificare l'URL dell'immagine dal file css. Inoltre, googling ad esempio: "addclass jquery" ti darà indicazioni su jquery api che ti daranno maggiori informazioni. – Joonas

La sintassi è la seguente

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

fonte

2011-10-20 06:54:56 aperture

Prova questa, il codice è meglio comunque:

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

fonte

2011-10-20 06:55:24 JNDPNT

Uso jQuery.hover invece di passaggio del mouse e mouseout

fonte

2011-10-20 06:55:45 twsaef

aggiungere il percorso completo dell'immagine e controllare

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

fonte

2011-10-20 07:05:55 Amila

+1, ma dovresti cambiare la prima immagine in 'compra_mouseOver.png' – Paulpro

per un errore. ho modificato il percorso – Amila

L'immagine scompare perché jQuery sostituisce il CSS a livello locale e non dal foglio di stile come prima. Quindi il tuo percorso deve essere aggiornato per riflettere il percorso dal tuo file HTML alla tua immagine. Se il file HTML è stato nella cartella principale e "immagini" di una cartella all'interno di quella principale, il codice sarebbe come questo:

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

mi incasinato in un primo momento anche.

fonte

2012-09-10 01:56:04 BrianG

Questa soluzione mi ha aiutato perché avevo un punto e virgola semi alla fine dell'istruzione url(). Ho rimosso il punto e virgola e l'immagine è stata modificata correttamente. –

jquery change background-image

risposta

Problemi correlati