Foto in bianco e nero che si colorano al passaggio del mouse.

Effetto di immagini in bianco e nero che si colorano al passaggio del mouse. Funziona solo con Safari, Chrome e Internet Explorer. Non viene rilevato con Firefox.

Avevo già presentato questo effetto agli inizi di questo mese e lo avevo suddiviso in tre parti. Infatti per visualizzarlo nei browser del tipo webkit (Safari e Chrome) abbiamo bisogno di un certo codice invece per vederlo con Intenet Explorer c'è un altro metodo proprietario della Microsoft. Allo stato non esiste una metodologia, o se c'è non la conosco, per avere questo effetto anche con Firefox.

Soffio di Dea mi ha dato lo spunto per raggruppare l'effetto e renderlo disponibile con lo stesso codice per Chrome, Safari e Internet Explorer. Firefox rimane però ancora escluso. Il codice da postare in un articolo o in una pagina statica in modalità HTML oppure in un gadget HTML/Javascript è il seguente

<style type='text/css'>
img.grayscale {
-webkit-filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.1s;
position: relative;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
img.grayscale:hover {
-webkit-filter: grayscale(0%);
}
</style>
<a href="#"><img class="grayscale"
onmouseover="this.className=''"
onmouseout="this.className='grayscale'"
src="URL_IMMAGINE"/></a>

dove al posto del cancelletto si può inserire un qualsiasi indirizzo e al posto di URL_IMMAGINE va messo il link diretto della foto che è sarà stata precedentemente postata su Picasa. L'effetto sarà così

Si può fare anche a meno di inserire il collegamento se questo non ci serve. In questo caso vanno eliminati i tag <a href="#"> e </a> . Usando la stessa sintassi della parte finale del codice si possono inserire tutte le immagini che vogliamo. E' anche possibile inserire tutto il codice che inizia con <style type='… e che finisce con </style> direttamente nel modello, esattamente sopra alla riga </head>. In questo caso tale effetto sarà disponibile per tutte le foto che saranno inserite con tale modalità. Concludo ricordando che 0.1s rappresenta un decimo di secondo ed è il lasso di tempo che intercorre tra il passaggio del mouse e la colorazione della immagine relativamente ai browser Safari e Chrome.