Effetto opacità o trasparenza al passaggio del mouse sopra le immagini.

Nei post precedenti abbiamo visto come creare un effetto hover per lo zoom e un effetto hover per passare dal bianco e nero ai colori e viceversa. Come preannunciato vado a illustrare un effetto hover anche per la trasparenza o opacità.

Ricordo che con l'utilizzo del javascript e di jQuery si possono rendere trasparenti o opache tutte le immagini di un sito. In questo post mi occuperò di mostrare solo gli effetti dovuti agli eventi mouseover e mouseout cioè a quegli eventi determinati dal cursore che passa sopra a una foto o dallo stesso che la lascia.

In sostanza si può mostrare una foto trasparente che diventa opaca al passaggio del mouse e una foto opaca che invece diventa trasparente. I maggiori browser sono in grado di leggere la trasparenza di un colore o di una foto. È stata introdotta anche la rappresentazione dei colori RGBA con cui inserire una trasparenza nel codice del colore tramite il canale Alpha.

I codici dei colori nell'HTML e nel CSS.

L'esigenza di rappresentare i colori in modo sistematico si è avuta ben prima dell'avvento dell'informatica. Già l'industria tipografica aveva creato un modello nel 1931 con cui rappresentare tutti i colori. Tale modello fu chiamato RGB (Red, Green, Blue) che partiva da questi tre colori per creare tutti gli altri mischiandoli in proporzioni variabili. Un insieme di colori in grado di riprodurre tutti gli altri è detto di colori primari. Oltre al Rosso, Verde e Blu del modello RGB sono stati proposti i modelli CMYK che è l'acronimo di Cyan, Magenta, Yellow, Key black. Si tratta di Ciano, Magenta, Giallo mentre Key black si riferisce a una particolare tecnologia dei sistemi di stampa che utilizzano questo modello.

Altri sistemi di rappresentazione sono HSB (Hue Saturation Brightness ovvero Tonalità Saturazione Luminosità) e HSI (Hue Saturation Intensity ovvero Tonalità, Saturazione ed Intensità). Per individuare un colore occorre quindi scegliere il modello e indicare il valore ovvero la quantità di colori primari per ciascuno di essi. Agli albori di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4 bit. Successivamente la rappresentazione dei colori utilizzò gli 8 bit con 256 colori riproducibili dai browser che aumentarono a più di 65.000 con i 16 bit.

Effetto dissolvenza e opacità per immagini al passaggio del mouse.

Ho già dedicato un post alla opacità nelle immagini e di come variarla al passaggio del mouse. Con questo articolo voglio fare un ulteriore passo avanti e creare una transizione continua tra immagine chiara e opaca. Si usa lo script JQuery che è direttamente fornito da Google Code mediante le API. L'idea è quella di offrire le seguenti possibilità di intervento a chi abbia un blog su Blogger

1. Far diventare tutte le immagini opache in una misura determinata che si schiariscono al passaggio del mouse
2. Avere tutte le immagini senza opacità che però lo diventano quando ci passa sopra il mouse
3. Far diventare opache al passaggio del mouse solo delle immagini prestabilite
4. Far ritornare normali al passaggio del mouse delle immagini che originariamente siano opache.

E' chiaro che ci vogliono quattro codici diversi per le varie personalizzazioni. In tutti e quattro i casi occorre andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Cercare la riga </head> e, immediatamente sopra, incollare i seguenti codici.

Come nascondere una immagine e mostrarla cliccandoci sopra con il mouse.

Nell'attività fotografica talvolta si possono fare delle realizzazioni che potrebbero urtare la sensibilità dei lettori del blog. Sarebbe quindi opportuno mantenere queste foto nascoste dando l'opzione di visualizzarle solo a chi lo desideri. Insieme a questa funzionalità sarebbe interessante inserirne un'altra che permettesse di ripristinare la situazione precedente.

Questa personalizzazione mi è stata richiesta in un commento ma potrebbe essere utilizzata anche da altri blogger fotografici che si trovassero nella stessa situazione. Il trucco consiste nell'inserire una opacità massima nella immagine che poi sarà visibile se ci verrà cliccato sopra.

Prima di procedere all'illustrazione del procedimento, ecco una immagine completamente opaca che può essere visualizzata cliccandoci sopra con il mouse

Come opacizzare una immagine e illuminarla al passaggio del mouse.

Il concetto di opacità di una immagine è ben conosciuto da chi è esperto di programmi di grafica. Si possono prendere a prestito alcuni concetti per rendere più interessanti le immagini del nostro blog.

Ho postato usato un codice per una opacità al 70%. Se si vuole variare la percentuale basta sostituire a 70 e 0.7 con altri numeri. Ricordo che la percentuale è inversamente proporzionale alla opacità. In altri termini una opacità al 30% significa che l'immagine è meno visibile che con una opacità al 60%. Ecco alcuni esempi



<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7;-khtml-opacity: 0.7;" src="URL-IMMAGINE"/>