Come trasformare in colorate delle foto in bianco e nero al passaggio del mouse.
In un articolo di qualche tempo fa mi ero occupato di Adipoli, una libreria javascript che è in grado di riprodurre molti effetti sulle immagini. L'effetto per visualizzare foto a colori in bianco e nero che poi si colorano al passaggio del mouse non era però funzionante su Blogger.
In post successivi ho evidenziato come questo effetto particolare avesse bisogno di codici diversi a seconda del browser utilizzato e come, nel caso di Firefox, non ci fosse un sistema affidabile a cui affidarci. Visto che questo effetto sembra incontrare molti estimatori specie nelle lettrici del blog, vado a presentare un metodo che funziona su tutti i principali browser. Dobbiamo però procurarci una seconda copia in bianco e nero della foto a colori a cui vogliamo aggiungere l'effetto.
Proprio per questa ragione ieri ho postato un articolo che spiegava i rudimenti necessari per ottenere una immagine in scala di grigi da una a colori. Entrambe le foto, quella a colori e quella in bianco e nero, vanno poi caricate su Picasa. Va quindi utilizzato questo codice in modalità HTML o in un gadget
<a href="#" onmouseout="if (document.images) document.grayscale.src= 'URL_IMMAGINE_GRIGIA';" onmouseover="if (document.images) document.grayscale.src= 'URL_IMMAGINE_COLORI';"/><img name="grayscale" src="URL_IMMAGINE_GRIGIA"/></a>
dove al posto del cancelletto ( # )può essere inserito l'URL di un link di una pagina web che vogliamo collegare alla immagine e al posto delle scritte colorate vanno incollati gli URL della immagine a colori e l'URL della immagine in bianco e nero, quest'ultima per due volte. L'effetto che si produce è questo:
 |  |
 |  |
Se avete un browser desktop e passate con il mouse sopra a una delle foto in bianco e nero, questa si colorerà immediatamente. In realtà si tratta di un trucco perché viene semplicemente mostrata una seconda foto per tutto il tempo che il mouse staziona sulla immagine.
Se volete inserire più di una immagine con questo effetto in una stessa pagina bisogna per ciascuna di esse modificare leggermente il codice. Per la seconda foto potrebbe diventare
<a href="#" onmouseout="if (document.images) document.grayscale1.src= 'URL_IMMAGINE_GRIGIA';" onmouseover="if (document.images) document.grayscale1.src= 'URL_IMMAGINE_COLORI';"/><img name="grayscale1" src="URL_IMMAGINE_GRIGIA"/></a>
per la terza si potrà mettere grayscale2 e così via. Per agevolare chi volesse creare una galleria di foto con questo effetto ho pubblicato su Google Drive il codice che ho usato per la demo di questo post
Per creare questa piccola galleria ho usato Windows Live Writer come mostrato nel post per inserire immagini in una tabella. Naturalmente può essere usato anche un altro Editor WYSIWYG, per esempio se si usa un Mac ci si può aiutare con Qumana che comunque non credo abbia la funzionalità delle tabelle.
Oh ma che bello! Grazie :*
RispondiElimina@SoffioDiDea
EliminaL'ho fatto proprio perché sapevo che ti piaceva :)
sei un tesoro grazie :)
Eliminabellissimo effetto! molto molto particolare, mi servirà.
RispondiEliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaE' possibile inserirlo in un marquee? Ho provato ma esce di tutto fuorchè una cosa decente :-))))) Ho una tabella con un marquee in qui scorrono delle immagini, vorrei dar loro questo effetto, dovrei quindi crearle doppie, in bianco e nero e a colori...ma il codice completo? mmmmmm...aiuto :-) Grazie
RispondiElimina@ Angy
EliminaSi possono inserire i codici di immagini in un marquee ma dovresti provare a togliere dal marquee i tag onmouseout onmouseover e simili perché sono gli stessi di questo codice. Non so se funzionerà ma puoi provare.
Proverò...grazie per la risposta così solerte:-) A presto
RispondiEliminaEccezionale! E' porprio ciò che cercavo. Però, per qualche motivo, almeno con firefox non mi funziona bene. Ho provato con una mia immagine: si "accende", ma poi non si "spegne". Ho pensato di aver sbagliato nell'inserire un link. ma non sembra sia la causa. Infatti ho provato a copiare direttamente il tuo codice sorgente per fare la controprova e l' "accensione/spegnimento" funziona solo su tre immagini su quattro. Hai idea se sia un problema di firefox o cosa?
RispondiEliminaGrazie infinite
Guarda che nel post c'è scritto che con Firefox ci sono purtroppo dei problemi. Ci sono altri sistemi ma i problemi allora si presentano con IE :(
Elimina@#
Ho letto anche il tuo post precedente. In questo, visto che avevi scritto: "vado a presentare un metodo che funziona su tutti i principali browser" ho pensato che le istruzioni fossero risolutive. :(
EliminaE aggiungo: dopo aver ripulito bene il tutto, il tuo codice sorgente funziona bene su blogger anche con firefox... Eppure, se provo a replicarlo con le mie immagni, no. Questo è un mistero.
EliminaCon i comportamenti strani dei vari browser ci si perde la testa :)
Elimina@#
Beh, allora, se vuoi ridere: il tuo codice funziona bene. Il mio (senza toccare nulla), tornandoci un paio d'ore dopo, non funziona più del tutto, nemmeno a metà come al primo inserimento. :-o
EliminaEbbene, ci sono riuscito! Con Safari funziona a meraviglia. Con Ios, ovviamente, non esiste l'onmouseover e, quando premi col ditino, compare per qualche attimo un poco rassicurante punto interrogativo prima che parta regolarmente il collegamento. Con gli altri browser, ti farò sapere. Avrei voluto postare il codice, che è un po' diverso dal tuo. Ma questo box non accetta i tag e non saprei come fare.
EliminaSe sei curioso, puoi comunque vederlo applicato sul mio blog.
Grazie per l'ispirazione.