L’ effetto rollover su un’ immagine o su un testo è l’ effetto che vi permette di cambiarne l’ aspetto al passaggio del mouse.
Il testo può cambiare colore e formattazione, mentre l’ immagine può essere sostituita da un’ altra, simile o completamente diversa.
E’ una delle prime tecniche che si imparano quando si iniziano a studiare i css. Vediamo come fare. Nel mio caso ho un’ icona dei feed rss che vorrei si illuminasse al passaggio del mouse.
Questa è la mia icona rss-icon.png
La schiarisco un pò con Photoshop e ottengo rss-icon-hover.png
inserisco nel template il link ai miei feed in questo modo:
E’ un semplice link come vedete e per poterlo personalizzare e inserire l’ immagine ho aggiunto il tag class=”rss-icon”.
Ora apriamo il nostro foglio di stile e aggiungiamo
.rss-icon {
background-image:url(images/rss-icon.png);
height:29px;
width:29px;
display:block;
}
.rss-icon:hover {
background-image:url(images/rss-icon-hover.png);
height:29px;
width:29px;
display:block;
}
I parametri height e width sono l’ altezza e la larghezza della nostra immagine. Come vedete non c’è nulla di complicato, infatti abbiamo già finito!
Altri articoli che potrebbero interessarti:
Ombra intorno alle immagini con WordPress
Come personalizzare i gravatar con un effetto mousehover
Loading ...
liliansi (2 comments)
Ciao. Sinceramente questa tecnica la trovo un pò obsoleta. Se ti trovi a dover gestire file veramente ma veramente piccoli o a dover cambiare colore di background o di font va benissimo…per per le immagini causa dei ritardi dovuti al caricamento che sciupano l’effetto rollover. Io di solito mi appoggio ad uno script (semplicissimi da usare e da installare) o sennò si può usare la tecnica di un un’unica immagine contenente le due icone a cui poi dai un diverso valore di scroll tramite CSS
nemoprincess (186 comments)
Ciao liliansi, hai ragione, la tecnica è obsoleta, era solo per introdurre l’ effetto. Il prossimo post sull’ argomento sarà su come migliorarla sempre usando solo css…e poi magari passeremo anche agli script…se ne hai uno in particolare da suggerire…siamo qui….grazie…
liliansi (2 comments)
Ahaha. Rileggendo il mio commento ho notato che ho fatto proprio la figura da pignola
Comunque per quanto riguarda gli script io per adesso sto utilizzando questo http://www.dnolan.com/code/js/rollover/ Funziona molto bene, non dà ritardi ed è molto semplice da implementare
Fabrizio (4 comments)
Ciao NemoPrincess. Complimenti per il sito. Anche io personalmente preferisco l’uso del puro CSS ed avevo letto da qualche parte come ottenere l’effetto rollover con un’unica img da far scrollare a seconda dello stato del link. Aspetto che fai un bel post al riguardo, sarà un’occasione in più per seguirti tramite RSS.
Buon lavoro.
nemoprincess (186 comments)
grazie per la segnalazione dello script, ho visto che è leggerissimo…ne terrò conto per il prossimo post a riguardo…
nemoprincess (186 comments)
Ciao Fabrizio, grazie!
A breve, anzi brevissimo il post sull’ effetto rollover con un’ unica immagine…
Max (2 comments)
Qualcuno sa per caso come fare una galleria immagini con effetto rollover al passaggio del mouse senza usare javascript o jquerty, mi serve assolutissimamente per fare il mio portfolio. Ho provato a fare qualche prova anche con il codice che avete linkato sopra ma non viene il rollover … Help me pls