Pubblicato il 05/08/12e aggiornato il

Effetto in bianco e nero per le immagini.

Come passare da una foto in bianco e nero a una a colori e viceversa al passaggio del mouse.
Nel post che ho dedicato al plugin Adipoli ho affrontato di sfuggita l'effetto grayscale che trasforma le immagini a colori in immagini in bianco e nero per poi farle tornare normali al passaggio del mouse. Questo effetto però su Blogger non funziona per una ragione che mi è ignota.

Ci sono anche altri sistemi per mostrare delle foto in bianco e nero che si colorano al passaggio del mouse o che viceversa diventano in scala di grigio quando passa il cursore.
Il problema di questi effetti è quello che funzionano solo con un determinato tipo di browser. Quello che va bene per Internet Explorer non va bene per Chrome e Safari mentre quello che va bene per loro non va bene per IE. Per Firefox invece le cose sono ancora più difficili.

Propongo tre tipi di effetti, due che funzionano con Chrome e Safari e uno che funziona solo con IE.

IMMAGINI IN GRIGIO CHE SI COLORANO CON IL MOUSE

Funziona solo con IE e il codice da usare per la singola immagine è questo

<style type="text/css">
img.grayscale {
position: relative;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
</style>
<img class="grayscale"
onmouseover="this.className=''"
onmouseout="this.className='grayscale'"
src="URL_IMMAGINE"/>

Il risultato può essere apprezzato solo con IE, con Chrome usando l'estensione IE Tab Classic o con Firefox con l'addon IE Tab


IMMAGINI A COLORI CHE DIVENTANO IN BIANCO E NERO AL PASSAGGIO DEL CURSORE

Funziona solo con Chrome e Safari e il codice da usare è il seguente

<style type="text/css">
img.grayscale1 {
-webkit-transition: -webkit-filter 1s;
}
img.grayscale1:hover {
-webkit-filter: grayscale(100%);
}
</style>
<img class="grayscale1" src="URL_IMMAGINE"/>

Si ottiene questo risultato


IMMAGINI IN SCALA DI GRIGI CHE SI COLORANO CON IL MOUSE

Anche questo effetto funziona solo con Chrome e Firefox e si deve usare questo codice

<style type="text/css">
img.grayscale2 {
-webkit-filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.2s;
}
img.grayscale2:hover {
-webkit-filter: grayscale(0%);
}
</style>
<img class="grayscale2"
src="URL_IMMAGINE"/>

Si ottiene questo effetto


Ricordo che al posto di URL_IMMAGINE deve essere inserito l'indirizzo della foto e che le classi colorate di viola hanno un nome arbitrario che può essere modificato con un altro. Tali classi insieme al tag style possono anche essere inserite nel modello sopra la riga </head>. In questo modo nel post è sufficiente richiamarne il nome dopo il tag <img . I valori di 1s e di 0.2s rappresentano il lasso di tempo occorrente per la trasformazione al passaggio del mouse e possono essere modificati.







7 commenti :

  1. Quando frequentavo i forum, era un effetto molto popolare per le taghette delle sezioni. Questo e il CSS popup image viewer. ;)

    RispondiElimina
    Risposte
    1. @BastetLaDeaGatta
      Lo conosco è questo
      http://goo.gl/TalbH
      mi hai dato un'idea per un post :)

      Elimina
    2. Un'altra idea per un post: Votate IDEE PER COMPUTER ED INTERNET ai Macchianera Blog Awards 2012.

      Elimina
    3. @Ernesto: cavoli! già la seconda volta che un mio commento ti è d'ispirazione. Sono onorata. *inchino*

      Elimina
  2. Ciao Ernesto. Non sono un assiduo commentatore, ma ti seguo sempre, i tuoi consigli sono preziosi per il mio blog.
    Mi scuserai l'OT, ma ho bisogno del tuo consiglio.
    Ho un blog da poco tempo e mi sorge un dubbio sul gadget delle etichette. Insomma, conosco l'utilità del servizio, ma il problema è che non so fino "a che punto" catalogare. Se dai un'occhiata al mio blog (non mi dispiacerebbe un tuo parere generale) noterai nella barra destra le varie catgorie. E noterai come, essendo il mio un blog televisivo, catalogo ogni programma, ogni personaggio, ogni genere tv, ogni rete. Adesso ho ancora pochi post, ma quando aumenteranno mi troverò con centinaia di categorie. E' la scelta giusta?
    Link: http://ilpiccoloschermo.blogspot.it

    RispondiElimina
  3. Che meraviglia... grazie! ma se metto entrambi i codici? Quelli per explorer e queli per chrome? :P

    RispondiElimina
  4. @Stefano-+-+-+
    Il Macchianera Blog Award non fa per me. La maggior parte dei miei lettori non mi dà neppure un Mi Piace o un +1 figuriamoci se mo vota. Quelli che mi scocciano con le email poi sono i meno generosi e quelli che pretendono di più senza darmi neppure un link :) Ma non me ne frega nulla!

    @Andre
    Se hai un blog televizivo ti consiglio di usare delle etichette rivolte ai generi (fiction, film, sport, musica, cartoon, varietà, ecc) e alle emittetti (rai, mediaset, sky, ecc)

    @SoffioDiDea
    Ho provato già ma non funziona. Bisognerebbe creare una classe con il punto e una con il cancelletto ma non mi è venuto niente in mente

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.