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.
[spoiler show=”Mostra il codice CSS” hide=”Nascondi 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;
}
[/spoiler]
<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.
