Pubblicato il 24/11/12e aggiornato il

Effetto trasparenza per le immagini al passaggio del mouse.

Come inserire effetto hover della trasparenza o della opacità nelle immagini al passaggio del mouse
Sebbene le immagini siano uno dei fattori che più rallentino la navigazione delle pagine è dimostrato che inserite in una giusta misura nei siti ne favoriscano il posizionamento nei risultati di ricerca. La più bassa velocità di caricamento viene infatti abbondantemente bilanciata dalla superiore tendenza che dei visitatori a soffermarsi su pagine con immagini interessanti, inoltre anche i motori di ricerca sembra che premino la presenza di contenuti diversi da quelli testuali quando siano pertinenti con il tema trattato nella pagina.

Tutti i blogger hanno necessariamente dimestichezza con l'utilizzo di foto da inserire negli articoli. Per distinguersi magari si può pensare di aggiungere un tocco di originalità attraverso l'inserimento del semplice effetto della trasparenza o se si vuole dell'effetto opacità.

Ecco due immagini identiche una inserita la prima in modo normale e l'altra con l'effetto trasparenza

stradina-campo strada campestre

Se passate con il mouse sopra alla prima immagine non succede nulla mentre se passate sopra alla seconda si vedrà una modifica della trasparenza della foto che tornerà normale quando il cursore uscirà dal perimetro della foto. Il codice da incollare in Modalità HTML in un post è il seguente

<img src="https://lh6.googleusercontent.com/-NIkNwnKIEuw/ULD0DqOfFfI/AAAAAAAAc0Q/Ph5dAQeCtq8/s250/vista-cespugli.jpg" alt="strada campestre" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" />

dove l'URL della immagine è colorato di rosso e la quantità di opacità inserita è del 60%. C'è da dire che questo effetto funziona con Firefox e Chrome ma non con le vecchie versioni di Internet Explorer. Da notare che è stato anche inserito il tag Alt fondamentale per la corretta indicizzazione delle foto.




17 commenti :

  1. Io ho fatto un lavoro simile in una pagina del mio blog, usando però soltanto il css.

    RispondiElimina
    Risposte
    1. Infatti, il problema è saper usare i CSS. Ma se sei nel mio caso con un blog con più di 200 immagini e non sai come modificare tutte le immagini è peggio.
      Questo post è utile per quelli che iniziano appena a bloggare e non hanno bisogno di rifare tutto.

      Elimina
  2. Scusa, non riesco a capire perchè non appaiono i miei commenti.
    Forse son nella cartella "spam".
    Jan Quarius

    RispondiElimina
    Risposte
    1. @storieriflessioni
      Mi ha incoriosito questo commento che ho visto su Google Reader. In effetti sono andato a vedere ed era insieme ad altri due nella cartella di spam. La ragione potrebbe essere che tu abbia settato una lingua diversa dall'italiano nella Bacheca di Blogger o del browser utilizzato

      Elimina
    2. Nella bacheca di blogger ho sempre avuto l'italiano come lingua. Nel browser l'inglese, ora ho cambiato... però.
      Grazie del suggerimento.

      Elimina
    3. @ JanQuarius
      Anche questo era andato nello spam :), prova a rivolgerti al Forum di Blogger.

      Elimina
    4. Bhe, guarda... probabilmente credo che quell'ultimo non l'hai pubblicato perchè appunto non ti conviene che qualcuno passi a qualche altra piattaforma diversa da Blogger.
      Una domanda da quando ti seguo volevo fartela, ma perchè te - persona che ne sa di informatica rimani su Blogger? Tutti quelli che conosco e che si creano dei siti/blog professionali migrano a domini non appartenenti alle reti blogger per principianti.

      p.s. Scusa l'OT, se ti va rispondimi! Grazie.

      Elimina
    5. @JanQuarius
      In questo blog mi occupo principalmente di tutorial per utenti di Blogger. Sarebbe davvero bizzarro se usassi un'altra piattaforma, non trovi? Questo non mi ha certo precluso la realizzazione di siti anche con Wordpress che comunque ha pure le sue controindicazioni
      http://www.ideepercomputeredinternet.com/2012/07/blogger-wordpress-cms-migliore.html

      Elimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @ PeSte
      In questo caso si può inserire la trasparenza solo in una determinata foto. Per gli effetti trasparenza o anche più complessi da applicare a tutto il blog puoi cercare nel menù o nella barra di ricerca. Per esempio c'è Adipoli
      http://www.ideepercomputeredinternet.com/2012/07/adipoli-jquery-hover-effect-immagini-blogger.html
      con la demo in questa pagina
      http://nuovo-blog-di-prova.blogspot.it/2012/07/adipoli.html

      Elimina
    2. grazie mille! devo aver fatto un po' di caos... per risponderti... credo di aver cancellato il messaggio sopra :-( me ne comparivano 3... ora nessuno! mi spiace!

      Elimina
    3. l'ho ripescato! <3
      carissimo Ernesto... colgo l'occasione di questo post per ringraziarti davvero di cuore per avermi permesso la realizzazione di quasi ogni desiderio in autonomia!... non capisco niente di informatica e fino ad oggi mi sono sempre appoggiata a mio fratello, guru e esperto che lo fa di lavoro... ma sono una intraprendente smanettona... che adora far da se e con le proprie mani... fino a poco fa girovagavo su internet... mi innamoravo di certe scelte grafiche, cercavo di spiegare come le volevo adattare al mio blog e aspettavo mesi e mesi... per vederle realizzate... ora, da quando ti conosco ho rivoluzionato tutto... compreso il blog! frutto interamente dei tuoi insegnamenti!! grazie davvero tantissimo!!!
      ora la domanda... (mentre mi accingo a realizzare il menu a tendina che oggi hai pubblicato e che rimanda qui)... le modifiche per la trasparenza delle foto che qui spieghi... è da apportare su ogni singola foto? o c'è un modo per farle trasformare tutte?! un abbraccio... a prestissimo!

      Elimina
  4. Ciao, se volessi fare in modo che una seconda immagine che viene fuori al passaggio del mouse sia in trasparenza lasciando vedere quella di sotto, posso in qualche modo modificare questo codice, te ne sarei molto grato.
    Grazie!!

    RispondiElimina
    Risposte
    1. @# Leggi questo post
      http://www.ideepercomputeredinternet.com/2011/02/effetti-per-immagini-realizzati-solo.html
      che forse può aiutarti

      Elimina
  5. Ciao Ernesto ti ripropongo il mio quesito. Alla fine della pagina del blog che ti linko (http://supervaidosa.com/), c'e' un effetto su foto che va da sinistra verso destra....facendo ispeziona elemento sono riuscita a risalire alla struttura ma non riesco a capire come farlo muovere!
    Forse avrai già trattato questo argomento? Mi puoi inserire il link nel caso tu l'avessi già fatto? Grazie 1000000 Milena

    RispondiElimina
    Risposte
    1. Si tratta di un blog su piattaforma Wordpress e il widget nel footer è quello degli Ultimi Post creato appunto con un plugin Wordpress
      @#

      Elimina
    2. Quindi deduco che per blogger non esista :-( ?
      Grazie come sempre!
      Adoro questo sito!

      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.