Ciao Paolo.
E’ tutto abbastanza semplice, l’unico problema è che la funzione che cambia colore all’immagine non ha un reset.
Per questo motivo, all’inizio devi salvarti il valore dell’immagine in una variabile e successivamente eseguire le azioni sul mouseover e sul mouseleave.
La funzione che dovrai scrivere sarà quindi la seguente:
| 1 2 3 4 5 6 7 8 9 | $( function() { var realImg = $("#myImage").attr('src'); // recupero l'immagine $("#myImage").on("mouseover", function() { tintImage(document.getElementById('myImage'), "#000000"); }); $("#myImage").on("mouseleave", function() { $(this).attr('src', realImg ); }); }); |
ed otterrai il risultato voluto, come puoi vedere anche nel tuo esempio che ho modificato e che trovi qui http://jsfiddle.net/KvLB4/2/
Buon lavoro!
Ti è piaciuto un tutorial?
Hai apprezzato una recensione?
Siamo stati d'aiuto nel forum e vuoi in qualche modo ringraziarci?
Sostieni la community di jQuery Italia con una donazione!
Grazie mille. Cercherò di modificarla. Vorrei ricreare l’effetto contrario, nel senso che l’immagine possa recuperare i colori con il mouseover.
Ciao Jqueryitalia. se posso, mi permetto di chiederti un paio di cose.
Io ho invertito le funzioni sotto. Perchè vorrei invertire l’effetto. C’è un problema però. L’immagine che viene visualizzata al completamento del caricamento della pagina è l’immagine contenuta nella variabile realImg che è quella originale. Devo passare con il mouse per vedere l’immagine virata. come posso partire subito con l’immagine virata?
| 1 2 3 4 5 6 7 8 9 | $( function() { var realImg = $("#myImage").attr('src'); // recupero l'immagine $("#myImage").on("mouseover", function() { $(this).attr('src', realImg ); }); $("#myImage").on("mouseleave", function() { tintImage(document.getElementById('myImage'), "#000000"); }); }); |
La seconda: l’opacità tra uno stato e l’altro la passo via css giusto?
Ti ringrazio per l’attenzione.
Ho creato questo esempio per te: http://jsfiddle.net/4Q89U/1/
Spero ti chiarisca le idee e possa esserti utile 😉
P.S.: occhio ad utilizzarlo se hai molte immagini, potrebbe impallare il browser.
Ti è piaciuto un tutorial?
Hai apprezzato una recensione?
Siamo stati d'aiuto nel forum e vuoi in qualche modo ringraziarci?
Sostieni la community di jQuery Italia con una donazione!
Ciao JqueryItalia,
ti ringrazio davvero tanto per la disponibilità e l’attenzione. Sto leggendo un libro di Apogeo, la guida completa Jquery, sto imparando almeno a riconoscere eventi e metodi, ma sono lontano dalla piena padronanza di jquery.
Ritornando al nostro esempio, nella mia pagina dovrei mettere una immagine soltanto. L’ultimo tuo esempio va benissimo, però per questo progetto legato all’associazione di un mio carissimo amico ho bisogno di virare l’immagine in un colore specifico, non in grayscale…
Se mi dai qualche indicazione posso provare io a modificare l’ultima funzione. Sempre se non disturbo troppo. Grazie ancora.
Ciao JqueryItalia, sto cercando in rete, ma non ho trovato ancora nulla 🙁
La mancanza di documentazione in rete non significa che non si possa fare… 😉
Ecco qui la soluzione (sfruttando la tua funzione iniziale ed il mio codice): http://jsfiddle.net/4Q89U/12/
Buon lavoro!
Ti è piaciuto un tutorial?
Hai apprezzato una recensione?
Siamo stati d'aiuto nel forum e vuoi in qualche modo ringraziarci?
Sostieni la community di jQuery Italia con una donazione!
Grazie Jquery, la sto modificando perchè vorrei ottenere l’effetto invertito… che si veda rossa e normale quando ci vado su con il mouse… ma non riesco ad ottenere ancora quello che voglio… sto modificando le due funzioni mouseover mouseout, ma evidentemente non basta… cosa dovrei modificare?
In effetti non basta modificare solo le funzioni mouseover e mouseout.
Ecco la soluzione definitiva http://jsfiddle.net/4Q89U/18/ 😉
Ti è piaciuto un tutorial?
Hai apprezzato una recensione?
Siamo stati d'aiuto nel forum e vuoi in qualche modo ringraziarci?
Sostieni la community di jQuery Italia con una donazione!
Devi essere loggato per rispondere a questa discussione.
