CSS – Rollover senza JavaScript

Uno degli effetti intramontabili che troviamo sulle pagine Web è il cosiddetto RollOver dei pulsanti, ovvero quella magìa

che fa cambiare aspetto al pulsante quando si passa sopra di esso col puntatore del mouse e che, se usato con garbo, conferisce chiarezza ed eleganza al tutto con semplicità. Immancabile all'interno degli editor WYSIWYG (acronimo dell'inglese "quel che vedi è ciò che ottieni"), il RollOver può essere realizzato in varie maniere, una delle tecniche più conosciute (un po' complessa da realizzare a mano), prevede l'uso di JavaScript, ma in realtà è anche possibile ottenere un buon risultato con delle regole nel foglio di stile . Vediamo come.

Tutto quello che dovete fare è generare un DIV, il cui aspetto e comportamento è descritto nello stile (incorporato o esterno, scegliete voi), che trovate di seguito.

Mostra il codice CSS »

<style>

.button_ex {

width: 100px;

height: 100px;

}

.button_ex a {

display: block;

width: 100px;

height: 100px;

background: url('url-delle-vostra-immagine') no-repeat top left;

}

.button_ex a:hover {

background: url('url-delle-vostra-immagine-di-rollover') no-repeat top left;

}

 

<div class="button_ex"><a href="collegamento-da-mostrare"></a></div>

 

Ovviamente tutto ciò che ho indicato in grassetto, va poi impostato in modo da combaciare con ciò che dovete mostrare e collegare, quindi rispettivamente  le dimensioni dell'area (occhio:non si tratta delle dimensioni dell'immagine!) del pulsante,  i percorsi (esatti!) delle immagini da mostrare, e infine, il link da aprire (se volete fare una prova potete impostarlo al valore "#") .

I più esperti (e attenti), avranno notato che alla base di tutto c'è un piccolo "imbroglio", che consiste nell'assegnare, per il div che rappresenterà il pulsante, delle regole per i due stati che riguardano il tag "a" (relativo ai link), differenziandone lo sfondo a seconda che il puntatore del mouse (scusate la semplificazione spicciola) si trovi o meno sopra al collegamento.

Ottimo per piccole cose, si presta maggiormente ai menu verticali (capirete perchè).

Buon divertimento.

 

email

Autore: GinoCQ

Web designer freelance.

Condividi su