[PaoloPartecipante]

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.

[jqueryitaliaAmministratore]

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:

$( 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!

[PaoloPartecipante]

Grazie mille. Cercherò di modificarla. Vorrei ricreare l’effetto contrario, nel senso che l’immagine possa recuperare i colori con il mouseover.

[PaoloPartecipante]

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?

$( 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.

[jqueryitaliaAmministratore]

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.

[PaoloPartecipante]

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.

[PaoloPartecipante]

Ciao JqueryItalia, sto cercando in rete, ma non ho trovato ancora nulla 🙁

[jqueryitaliaAmministratore]

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!

[PaoloPartecipante]

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?

[jqueryitaliaAmministratore]

In effetti non basta modificare solo le funzioni mouseover e mouseout.

Ecco la soluzione definitiva http://jsfiddle.net/4Q89U/18/ 😉

[Autore]

Post