Sei in: Home >>Tutorials >>Programmazione >>Css (Cascading Style Sheets) ovvero Fogli di Stile

Pulsanti con rollover con i fogli stile

Il codice seguente non è adatto ai pulsanti con effetto "premuto" ma a quelli che cambiano colore al passaggio del mouse e sono costituiti da una immagine che è una pulsante vuoto senza alcuna scritta sopra: il testo del pulsante è un link ipertestuale.

Vanno pertanto preparate due immagini, una per lo stato di base del pulsante e una per quello col cambio di colore. La seconda immagine non deve dare l'effetto premuto perchè la posizione del link ipertestuale rimane fissa e si otterrebbe uno strano brutto effetto di pulsante premuto con la scritta che invece di seguire il pulsante resta ferma.

Questo codice si adatta inoltre a quei casi in cui non si ha necessità di avere pulsanti di lunghezza diversa ma tutti uguali perchè le scritte dei link lo permettono, pertanto si userà un unica immagine invece di tante immagini diverse per ogni pulsante .

Nel foglio di stile vanno scritte le seguenti regole:

 

a {

background-image: url("pulsante.gif"); */inserire il percorso all'immagine del pulsante/*

width:156px; */dimensioni dell'immagine del pulsante, cambiarle a piacere/*

height: 32px;*/come sopra/*

 line-height: 32px;*/deve essere uguale a height per ottenere la centratura verticale/*

 color:#D4E10B;*/colore del testo/*

text-align: center; */centra il link dentro al pulsante/*

}

a:hover {  */ regole che definiscono i comportamenti al passaggio del mouse/*

 background-image: url("pulsante_roll.gif");*/nuova immagine del pulsante/*

width:156px ;

height: 32px;

line-height: 32px;

background-color: :#D4E10B; */colore dello sfondo del link al passaggio/*

color:#336633;}*/colore del testo al passaggio del mouse/*

 

 

La logica di funzionamento è semplice: il box che contiene il testo con il collegamento ipertestuale deve avere le dimensioni esatte del pulsante e tale immagine viene messa come sfondo del suddetto link. Al passaggio del mouse si cambia immagine di sfondo ed eventualmente anche il colore del testo.

Per completezza si fa cambiare anche il colore dello sfondo nella eventualità che il browser del visitatore non supporti le immagini e anche per rendere visibili i rollover nonostante una eventuale connessione internet lenta del visitatore che impieghi molti secondi per scaricare le immagini