Pubblicato il 27/06/11e aggiornato il

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.

 

EFFETTO SCHIARIMENTO IN TUTTE LE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;img&#39;).fadeTo(&#39;slow&#39;, 0.6);
$(&#39;img&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
});
});
</script>

EFFETTO OPACITA' IN TUTTE LE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;img&#39;).fadeTo(&#39;slow&#39;, 1.0);
$(&#39;img&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
});
});
</script>

EFFETTO SCHIARIMENTO SOLO IN ALCUNE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.LevaOpac&#39;).fadeTo(&#39;slow&#39;, 0.6);
$(&#39;.LevaOpac&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
});
});
</script>

EFFETTO OPACITA' SOLO IN ALCUNE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.AggOpac&#39;).fadeTo(&#39;slow&#39;, 1.0);
$(&#39;.AggOpac&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
});
});
</script>

 

Il valore 0.6 rappresenta la quantità di opacizzazione (0.1 è il massimo di opacità e 1.0 è assenza di opacità). Con i primi due codici l'effetto è automatico per tutte le immagini che si sono postate e per quelle che si pubblicheranno. Se invece si utilizzano gli ultimi due codici, per visualizzare l'effetto in una determinata immagine, dobbiamo inserirla in modalità HTML con questa struttura

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

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

dove il tag Title serve per visualizzarne il nome in stile tooltip e il tag Alt è importante ai fini SEO.Si deve in sostanza inserire la classe presente nello script.  Nel caso abbiate caricato 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. Ho postato una demo di questo effetto con quattro immagini. Quelle della prima fila sono opache e diventano chiare al passaggio del mouse mentre quelle della seconda fila hanno il comportamento contrario

effetto opacità immagini jquery

Funziona con Chrome, Firefox, Safari, Opera e Internet Explorer 9.





11 commenti :

  1. Non commento mai,ma sono una tua assidua lettrice e ci tenevo a scriverti almeno un commento per ringraziarti.
    I tuoi articoli sono sempre chiarissimi ed utilissimi:)

    RispondiElimina
  2. @Carmen
    Sempre felice di aiutare chi ha un po' meno esperienza di me :)

    RispondiElimina
  3. Ottimo lavoro come sempre solo una piccola correzione, l'articolo appare confuso perchè il termine opacità viene utilizzato male, l'opacità è la caratteristica di un'immagine di NON essere trasparente quindi se togliamo opacità a un'immagine la rendiamo trasparente e se diamo opacità la facciamo tornare normale... per il resto molto utile

    RispondiElimina
  4. @Fama
    Ho semplicemente tradotto i due vocaboli inglesi usati come tag
    opacity con opacità e
    fade con dissolvenza.
    Poi è chiaro che si possono fare tutte le disquisizioni semantiche del caso :)

    RispondiElimina
  5. Io sono una appassionata di questo blog grazie a voi ho imparato un casino di cose! Ho un nuovo quesito per voi in questo sito http://shop.cndworld.it/ in alto troverete 4 foto. Quando passo col mouse su queste foto si ottiene un effetto stupendo come si chiama e dove posso trovarlo? Ancora grazie

    RispondiElimina
    Risposte
    1. Non è che si possa trovare in giro. È specifico del modello. Quando ho un po' di tempo li darò un'occhiata più precisa (senza impegno)
      P.S. Grazie per il pluralis majestatis :)
      @#

      Elimina
  6. E' possibile ottenere un effetto simile anche sulle scritte? Tipo quando diciamo clicca qui, vorrei che su "qui" passandoci sopra col mouse la scritta cambi colore o abbia un effetto di dissolvenza.. E' possibile?

    RispondiElimina
    Risposte
    1. @# Si possono personalizzare i link
      http://www.ideepercomputeredinternet.com/2014/06/personalizzare-aspetto-link-blogger.html
      Ora proprio l'effetto dissolvenza mi sembra difficile applicarlo :)

      Elimina
  7. Dove vanno i inseriti i codici?

    RispondiElimina
    Risposte
    1. Li puoi mettere su Layout > Aggiungi un gadget > HTML/Javascript per pubblicare le immagini in un widget da mettere nella sidebar o nel footer oppure li puoi incollare uno di seguito all'altro nell'Editor nel post in Modalità HTML che è quel pulsante che si trova accanto a Scrivi. Per ultimo puoi incollare il codice nel modello subito sopra alla riga </head> per incollare in Modalità HTML del post solo la riga del codice della immagine
      @#

      Elimina

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.