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
 | |
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3IUfXm0nnGKsOtS70B2OvUHTf5A2N0aX_5mRzzeX8DvylVCtSB9Dr7J7P6aJYV8B9f9Pm4RykMaj42w8IzpeoNiu39ncu-TgtMr1OtD8hz8JelQEIItDu4588phM1WJBQYvF4dWZLUqg/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.
Io ho fatto un lavoro simile in una pagina del mio blog, usando però soltanto il css.
RispondiEliminaInfatti, 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.
EliminaQuesto post è utile per quelli che iniziano appena a bloggare e non hanno bisogno di rifare tutto.
Scusa, non riesco a capire perchè non appaiono i miei commenti.
RispondiEliminaForse son nella cartella "spam".
Jan Quarius
@storieriflessioni
EliminaMi 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
Nella bacheca di blogger ho sempre avuto l'italiano come lingua. Nel browser l'inglese, ora ho cambiato... però.
EliminaGrazie del suggerimento.
@ JanQuarius
EliminaAnche questo era andato nello spam :), prova a rivolgerti al Forum di Blogger.
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.
EliminaUna 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.
@JanQuarius
EliminaIn 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
Questo commento è stato eliminato dall'autore.
RispondiElimina@ PeSte
EliminaIn 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
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!
Eliminal'ho ripescato! <3
Eliminacarissimo 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!
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.
RispondiEliminaGrazie!!
@# Leggi questo post
Eliminahttp://www.ideepercomputeredinternet.com/2011/02/effetti-per-immagini-realizzati-solo.html
che forse può aiutarti
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!
RispondiEliminaForse avrai già trattato questo argomento? Mi puoi inserire il link nel caso tu l'avessi già fatto? Grazie 1000000 Milena
Si tratta di un blog su piattaforma Wordpress e il widget nel footer è quello degli Ultimi Post creato appunto con un plugin Wordpress
Elimina@#
Quindi deduco che per blogger non esista :-( ?
EliminaGrazie come sempre!
Adoro questo sito!