Vai al contenuto

Virare un immagine ad un colore predefinito

Ancora una volta una richiesta d’aiuto pervenuta sul forum è alla base dei nostri tutorial.

Virare un'immagine ad un colore predefinito

Paolo infatti aveva la necessità di virare alcune immagini ad un colore predefinito volendo però che al mouseover queste tornassero con i colori originali (la richiesta sul Forum è la seguente canvas css jquery modifica per l’effetto hover ).

Paolo ci segnalava una funzione trovata in rete adatta allo scopo ( tintImage, che utilizza l’elemento HTML5 canvas che consente il rendering dinamico delle immagini) che però non riusciva ad adattare al suo caso. La funzione è la seguente:

Abbiamo quindi preso 3 immagini ed abbiamo sviluppato la funzione javascript necessaria allo scopo, sfruttando anche la proprietà CSS z-index: tale proprietà infatti ci consente di posizionare un’altro elemento sopra l’immagine originale.
Volendo virare le immagini con tre differenti colori, come prima cosa creiamo un array con i colori da applicare alle immagini:

A questo punto eseguiamo un ciclo sulle immagini principali: “avvolgiamo” ogni immagine in un div contenitore e la cloniamo assegnandoli la classe ‘item-vired’.
Inseriamo quindi l’immagine clonata prima dell’immagine originale ed infine assegniamo al contenitore le dimensioni dell’immagine.

Il metodo .queue() ci permette di manipolare direttamente una coda di funzioni.
Inoltre richiamando il metodo con una funzione di callback ci permette di collocare una nuova funzione alla fine della coda.
La funzione di callback verrà eseguita una volta per ogni elemento.

Utilizziamo quindi la funzione tintImage per virare ogni immagine con il proprio colore assegnato precedentemente tramite l’array toColor definito all’inizio.

A questo punto abbiamo quindi un contenitore ( img_wrapper ) con all’interno due immagini: quella clonata e virata ( item_wired ) e quella originale ( item ).
Qui ci vengono in aiuto le proprietà CSS z-index e position: il contenitore infatti verrà posizionato in maniera relativa mentre le due immagini saranno posizionate in modo assoluto.
Inoltre all’immagine virata verrà dato uno z-index di 100 per posizionarla al di sopra di quella originale.

A questo punto utilizziamo le funzioni mouseover e mouseout sul contenitore per ottenere l’effetto voluto: useremo un’animazione per modificare l’opacità dell’immagine virata per far apparire l’immagine originale posizionata esattamente sotto di essa.

Ovviamente il tutto andrà eseguito al document.ready.
Otteniamo quindi il seguente codice javascript

Il codice CSS invece sarò il seguente:

 

Potete visualizzare la

DEMO

Questo tutorial ti è servito? Sostieni jQuery Italia con una donazione!







Scrivi il tuo commento con 199 caratteri

Scritto da jqueryitalia

Sito WEB: http://www.jqueryitalia.org

  • Lo stesso Paolo ci segnala un problema nella funzione tintImage relativamente alla variabile map che è impostata a 320×240 (le dimensioni delle immagini dell’esempio).
    Se le immagini hanno dimensioni diverse la colorazione fallisce. Abbiamo quindi sostituito:

    var map = ctx.getImageData(0, 0, 320, 240);

    con

    var map = ctx.getImageData(0, 0, imgElement.offsetWidth, imgElement.offsetHeight);

Questo sito utilizza i cookies, anche di terze parti: se chiudi questo banner, scorri la pagina o continui con la navigazione, tu ACCONSENTI all'utilizzo dei cookies. MAGGIORI INFORMAZIONI

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi