Come aggiungere o togliere opacità alle immagini di Blogger.

Come inserire effetti di opacità e di nitidezza in un sito su piattaforma Blogger da visualizzarsi in tutte le immagini o solo in alcune prescelte.

La libreria jQuery nasce con l'obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi, l'animazione di elementi in pagine HTML e di implementare funzionalità AJAX. Mediante questa libreria si possono creare effetti di ogni genere che possono essere applicati a menù e ad altri elementi che necessitano di animazione.

La libreria jQuery viene periodicamente aggiornata e è sempre meglio utilizzare la versione più recente. In questo articolo vedremo una applicazione molto interessante di questa libreria per aggiungere opacità a tutte o solo a determinate foto.  Prenderemo in considerazione quattro possibili opzioni.

1. Mostrare tutte le immagini opache che si schiariscono al passaggio del cursore
2. Mostrare tutte le immagini senza opacità che diventano opache quando ci passa con il mouse
3. Far diventare opache al passaggio del cursore solo delle immagini prestabilite
4. Far ritornare normali al passaggio del mouse delle immagini che originariamente siano opache.

Per questi effetti occorrono quattro diversi tipi di codici mentre per la versione jQuery utilizzeremo l'ultima senza quindi bisogno di doverla periodicamente aggiornare. Se nel vostro modello esiste già una versione di jQuery, la riga del codice che riguarda questa libreria evidenziata di giallo può e deve essere tralasciata. Tutti i codici vanno implementati nel template. Si va su Modello > Modifica HTML e si cerca la riga </head> quindi, subito sopra, si incolla uno dei quattro codici seguenti quindi si salva il template.

EFFETTO SCHIARIMENTO DELLE IMMAGINI AL PASSAGGIO DEL MOUSE

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'> </script>
<script type='text/javascript'>
 //<![CDATA[
$(document).ready(function() {
 $('img').fadeTo('slow', 0.5);
 $('img').hover(function() {
 $(this).fadeTo('slow', 1.0); },
 function() {
 $(this).fadeTo('slow', 0.5);
 });
 });
 //]]>
</script>

Con questo script tutte le immagini del vostro sito si opacizzeranno del 50% (0.5 di opacità). Quando il lettore ci passerà sopra con il mouse la opacità scomparirà (1.0)e le foto si vedranno in tutta nitidezza.

EFFETTO OPACITÀ DELLE IMMAGINI AL PASSAGGIO DEL MOUSE

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'> </script> 
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function() {
 $('img').fadeTo('slow', 1.0);
 $('img').hover(function() {
 $(this).fadeTo('slow', 0.5); },
function() {
 $(this).fadeTo('slow', 1.0); }
); }
);
 //]]>
</script>

Con questo script le immagini si vedranno in tutta nitidezza (1.0) ma si opacizzeranno del 50% (0.5 di opacità) al passaggio del cursore sopra di esse.

EFFETTO OPACITÀ IN ALCUNE IMMAGINI DEL SITO AL PASSAGGIO DEL CURSORE

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'> </script> 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $('.AggOpac').fadeTo('slow', 1.0);
 $('.AggOpac').hover(function() {
 $(this).fadeTo('slow', 0.5); },
function() {
 $(this).fadeTo('slow', 1.0);
 });
 });
 //]]>
</script>

EFFETTO SCHIARIMENTO IN ALCUNE IMMAGINI DEL SITO AL PASSAGGIO DEL CURSORE

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'> </script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $('.LevaOpac').fadeTo('slow', 0.5);
 $('.LevaOpac').hover(function() {
 $(this).fadeTo('slow', 1.0); },
 function()
{ $(this).fadeTo('slow', 0.5);
 });
 });
 //]]>
</script>

Con questi due ultimi script non verrà modificato l'aspetto delle immagini ma solo di quelle foto che verranno postate con le apposite classi di stile colorate di viola.  L'opacità è settata al 50% mentre la nitidezza è completa (1.0). Si possono anche scegliere valori diversi anche decimali (p.e. 0.62 che porta a una opacità del 62%. Quindi dopo aver incollato il codice prerscelto subito sopra a </head> nel modello e aver salvato il template, per avere l'effetto desiderato dobbiamo pubblicare le immagini in un post in Modalità HTML secondo questa sintassi.

<img class='LevaOpac' src='URL IMMAGINE' alt="Testo Alternativo" title="Nome Immagine"/>
<img class='AggOpac'  src='URL IMMAGINE' alt="Testo Alternativo" title="Nome Immagine"/>

La prima riga serve per il terzo effetto e la seconda riga per il quarto effetto.  Il tag Title serve per visualizzarne il nome in stile tooltip e il tag Alt è importante ai fini SEO. Si deve in pratica inserire la classe presente nello script.  Nel caso abbiate postato le immagini con l'Editor di Blogger è sufficiente che andiate su Modifica HTML e incolliate una delle due espressioni

class='LevaOpac'  e class='AggOpac'

subito dopo il tag <img. Il risultato sarà simile al seguente

Si può anche vedere una Dimostrazione online

Demo
Clicca qui