canvas css jquery modifica per l'effetto hover
- Questo topic ha 25 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 8 anni, 8 mesi fa da Paolo.
- AutorePost
- 31 Dicembre 2013 alle 03:05 #5669PaoloPartecipante
Ciao ragazzi, avrei bisogno del vostro aiuto. In pratica vorrei modificare questo script. Non vorrei i pulsanti ma l’immagine colorata che torna normale quando c’è l’hover del mouse. Potreste darmi una mano a modificare? vi ringrazio.
3 Gennaio 2014 alle 12:44 #5670jqueryitaliaAmministratoreCiao 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:
$( 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!
12 Gennaio 2014 alle 18:06 #5693PaoloPartecipanteGrazie mille. Cercherò di modificarla. Vorrei ricreare l’effetto contrario, nel senso che l’immagine possa recuperare i colori con il mouseover.
13 Gennaio 2014 alle 01:25 #5694PaoloPartecipanteCiao 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?$( 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.
13 Gennaio 2014 alle 10:25 #5695jqueryitaliaAmministratoreHo 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.
13 Gennaio 2014 alle 22:47 #5697PaoloPartecipanteCiao 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.
15 Gennaio 2014 alle 17:34 #5700PaoloPartecipanteCiao JqueryItalia, sto cercando in rete, ma non ho trovato ancora nulla 🙁
17 Gennaio 2014 alle 01:22 #5701jqueryitaliaAmministratoreLa 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!
18 Gennaio 2014 alle 00:21 #5702PaoloPartecipanteGrazie 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?
18 Gennaio 2014 alle 19:56 #5707jqueryitaliaAmministratoreIn effetti non basta modificare solo le funzioni mouseover e mouseout.
Ecco la soluzione definitiva http://jsfiddle.net/4Q89U/18/ 😉
- AutorePost
- Devi essere connesso per rispondere a questo topic.