Per chi ancora usa Javascript per inserire bottoni in rollover all’interno del proprio sito eccovi un tutorial per il CSS rollover, semplice ma molto funzionale.
I vantaggi rispetto all’uso del rollover Javascript sono il funzionamento sui browser con lo script disabilitato, implementazione velocissima, migliore leggibilità del testo da parte del browser e dei motori di ricerca e notevole risparmio di tempo nel caso vogliate cambiare o eliminare l’effetto in seguito.
COME FUNZIONA IL CSS ROLLOVER
Il metodo in questione si serve di immagini in background e dell’evento :hover del tag <A>.
Un’ immagine, contenente sia il disegno di rollout che di rollover, viene usata come background mostrando solo la prima porzione, quella di rollout: passando l’utente col mouse sopra all’immagine viene spostata la posizione del background e visualizzata la porzione di rollover, creando l’effetto.
Capirete ancora meglio vedendo lo script alla fine della pagina.
CREIAMO L’IMMAGINE
Come detto prima, avremo bisogno di un’unica immagine divisa in 2 porzioni, le quali dovranno essere della stessa grandezza in pixel.
Quindi creiamo prima l’immagine di rollout, quando l’effetto non è attivo: come al solito userò il logo del sito.
Apriamo Photoshop (nessuno comunque ci vieta di usare altri programmi di grafica ma questo tutorial illustra anche qualche comando del programma Adobe :) ) e la nostra immagine, premiamo Ctrl+R (o se preferite cliccate su View->Rulers) per attivare il RULER, il righello, che ci servirà per centrare al massimo il bottone, blocchiamo il suo livello selezionandolo dalla palette dei livelli e quindi cliccando sul lucchetto, selezionamo il livello di background, torniamo all’immagine e clicchiamo con il pulsante sinistro tenendo premuto sui numeri del righello a sinistra per creare una GUIDA, spostiamola fino al centro dell’immagine, dovreste sentire che si posiziona da sola (questo perchè il programma ci aiuta a posizionarle al centro) quindi rilasciate il pulsante del mouse.
Eseguite la stessa operazione creando una guida verticale cliccando sul righello in alto.
Ora riselezionate il livello con il bottone, togliete il lucchetto, posizionatelo più o meno al centro servendovi delle guide.
Ora premete Ctrl+Alt+C (oppure cliccate su Image->Canvas Size…), segnatevi altezza e larghezza che ci serviranno per il CSS, posizionate l’anchor (l’ancora) a sinistra cliccando sulla freccia a sinistra, quindi raddoppiate l’ampiezza, nel mio caso passerò da 150 pixel a 300, e cliccate OK.
La parte vuota a destra conterrà il nostro effetto di rollover.
Nel mio caso ho semplicemente cliccato sul bottone e sullo sfondo e tenendo premuto Alt ricliccato per duplicare i livelli, poi ho bspostato il nuovo livello nella parte a destra, che è la perfetta dell’immagine intera, occupandola tutta.
Le guide ormai non ci servono più quindi possiamo anche toglierle cliccandoci sopra e riportandola sopra il righello.
Per creare un effetto di luminosità al passaggio del mouse, ho semplicemente cambiato i colori del logo usando i Gradient Map, li trovate cliccando su Image->Adjustments->Gradient Map…, voi potete utilizzare gli effetti che preferite, tipo un effetto di Blur in rollout che va via in rollover o del bagliore, dato spazio alla vostra creatività !
Ora l’immagine è pronta, possiamo salvarla in gif, jpg o png e tornare a lavorare sulla nostra pagina.
E ORA IL CODICE…
Per far funzionare questo trucco, ogni bottone deve avere un <div> parent del tag <a> ossia un div che contiene il nostro link.
L’immagine non viene caricata sull’HTML, sarà il CSS ad assegnare al div lo sfondo che ci serve.
Al div verrà data la proprietà class=button_ex.
Ecco il codice da inserire nella pagina:
La parte più importante sta nel CSS, il nostro foglio di stile, dove andremo ad inserire questo codice:
width: 150px;
height: 155px;
}
.button_ex a {
display: block;
width: 150px;
height: 155px;
background: url(images/sphere.jpg) no-repeat top left;
}
.button_ex a:hover {
background-position: top right;
}
Come avviene la magia?
Prima dichiariamo il tag <A> come "block", altrimenti non siamo in grado di assegnare altezza e larghezza essendo un elemento inline con dimensioni pari al contenuto, poi assegniamo sia al tag <DIV> che al tag <A> le dimensioni che ci siamo segnati prima, che corrispondono a metà dell’immagine.
Infine la parte più importante: sull’evento :hover del tag <A> cambiamo la posizione del background da left a right creando l’effetto al passaggio del mouse.
Una volta realizzata questa tecnica possiamo implementarla chiudendo i tag <A> all’interno di <DIV> con classe button_ex ed eliminare o cambiare poi l’effetto modificando solo le linee del css, a differenza del Javascript dove avremmo dovuto cercare tutti i link nelle nostre pagine.
In questo caso ho utilizzato uno sfondo con una scritta, ma credo che l’uso che ne farete voi sarà quello di creare sfondi standard per i vostri bottoni dove la scritta sarà il testo del tag <A>.
Se poi questa spiegazione vi offrirà spunto per nuove cose o effetti non mancate di segnalarmele commentando su questo sito :)
Ecco l’effetto CSS rollover nella sua semplicità ed immediatezza.
Ritieni questo post utile o interessante?
Condividi e Segnala
bottoni css, bottoni rollover, css rollover, tutorial css
[...] capire come funziona e cos’è un CSS Sprite facciamo riferimento ad un tutorial precedente dove si spiegava come utilizzare un’unica immagine per creare dei bottoni con effetto di [...]
ciao,hai un esempio completo per farmi vedere dove inserire i ccs creando bottoni rollover?
grazie in anticipo
ciao,hai un esempio completo per farmi vedere dove inserire i css creando bottoni rollover?
grazie in anticipo
Beh, il codice CSS sta dentro un file .CSS che viene caricato dentro la pagina, tra i tag , tipo l’esempio qui in basso, che puoi vedere anche dal sorgente.
Ciao!
In effetti questo uso del roll delle immagini tramite ridefinizione tag nel css snellisce il lavoro del browser e assicura il funzionamento in molti browser attualmente usati.
Per assurdo si potrebbe anche tralasciare il div impostando, nella ridefinizione del tag A, il cambiamento della posizione dell’immagine. Che ne pensate?
Con fantasia,
Atlantis X
Certo, nel caso di pochi link è più funzionale e leggibile ma se consideri un menù con almeno 5-6 collegamenti tanto vale inserirli all’interno di un DIV e definire la classe solo per questo piuttosto che assegnare la stessa ad ogni A.
Magari nell’esempio potevo evitare di assegnare dimensioni al DIV che lo contiene, sono inutili.
Invece dell’elemento DIV usa una lista come è giusto fare quando devi implementare un menù.
In questo modo puoi mantenere facilmente la struttura del menù anche a fogli di stile disabilitati e inoltre semanticamente sei corretto in quanto stai realizzando una lista di link, ovvero un menù.
Concordo assolutamente :)
Nel caso dei menù la scelta migliore ricade nell’UL (Unorderd List) dove gli LI (List Item) contengono i link.
E per affiancare più bottoni con il rollover come si fa???
In questo caso basta aggiungere alla classe button_ex la proprietà float: left;, comunque ci sono anche altri modi, tipo l’UL sopra citato che puoi vedere in un tutorial anche in questo articolo: CSS SPRITE: cosa sono e come migliorano il caricamento della pagina
Ho seguito le tue indicazioni e ho creato un bel pulsante pubblicitario…grazie!!!
Ho ottenuto le immagini (default e attivo ) su un sito apposito ( http://www.grsites.com ) e le ho aperte entrambe con Photoshop. E qui ho deviato un po’ dalle tue indicazioni: non capivo l’utilizzo dei righelli, percio’ ho aperto un nuovo documento con larghezza canvas doppia di quella delle due singole immagini.
Poi , con tutti e tre i files aperti,ho trascinato una alla volta le due istanze del banner all’interno del documento vuoto e le ho posizionate alla perfezione sullo sfondo bianco ,perche’ ho attivato l’effetto calamita ,coprendolo completamente (le singole immagini erano rettangolari e già dotate di sfondo uguale a quell del mio blog ).Ovviamente poi ho impostato l’ancoraggio a sinistra.
Non mancherò di linkare il tuo blog.
P.S. per gli utenti di blogger :
Caricate l’immagine come un widget foto togliendo la spunta da ” riduci e adatta ” altrimenti il gioco delle dimensioni va a farsi benedire !
Implementate il codice CSS prima del tag
Felice di esserti stato d’aiuto :)
Buon lavoro!
Noto, che anche nel tuo caso, i div, danno problemi durante il resize delle pagine, infatti rimpicciolendo la finestra si muovono e riportandola a tutto schermo non torna come al principio. Da cosa è causato ciò?
fichissimo!!!ottima spieghazione e contenuto eccellente grazie!!
Ciao, è un ottima idea per allegerire un sito.
Nel caso dovessi fare un widget per un blog (su blogger nel mio caso) funzionerebbe ugualmente?
Certo, basta che nel widget includi anche le immagini che hai creato, oppure le fai caricare da remoto ma non credo ti convenga nel caso tu voglia distribuirlo. :)
Questo modus operandi ha secondo me una grossa falla: cosa succede se l’utente disabilita il foglio di stile? I collegamenti spariscono completamente.
Hai assolutamente ragione!
E infatti, per ovviare al problema suggerisco di inserire all’interno del tag A il tag SPAN con il contenuto testuale (che potrebbe anche essere SEO oriented ;) ) così che in caso di problemi con il CSS o di motore di ricerca, il collegamento funzioni correttamente.
Per non visualizzare il testo contenuto nel tag SPAN basterà aggiungere la regola con proprietà display:none;
Grazie per la notifica.
ciao,ho un problema anch’io riguardo il caricamento delle immagini di un sito..volendo ovviare al tutto usando gli sprite,non riesco comunque a montare l’immagine visto che nei tutorial l’immagine finale risulta in orizzontale come una solita navigation,mentre io ho 4 immagini sovrapposte in verticale due delle quali sono pulsanti…come muovermi?Grazie