Con questo tutorial, vediamo come usare un’ unica immagine di sfondo da applicare a un pulsante per creare i 3 stati (normale, sopra e selezionato) a un pulsante.

Questo metodo permette di avere una singola immagine caricata da l’inizio e evitare problemi di ’scatti’ tra i differenti stati quando più immagine di sfondo vengono usate su chiamata del stato stesso.

L’idea sarà realizzata usando la proprietà CSS background-position,
spostando il sfondo con i valori top, center e bottom.

Per iniziare, servirà creare l’immagine di sfondo con i 3 stati allineati verticalemente.
In questo esempio. il pulsante è alto di 25px, per quello il sfondo completo sarà di 75px (3 stati x 25):

• in alto: il stato normale del pulsante che sarebbe uguale alla background-position:top;
• al centro: il stato hover del pulsante che sarebbe uguale alla background-position:center;
• in basso: il stato premuto del pulsante che sarebbe uguale alla background-position:bottom;

Ecco, l’immagine completa usata in questo tutorial:

E l’esempio finale di 2 pulsanti con il primo pulsante selezionato:

L’HTML di base usato contiene solo semplice link a contenuti in un div ‘menu’:

<div id=”menu”>
<a href=”#nogo”></a>
<a href=”#nogo”></a>
</div>

Adesso possiamo dare un pò di stile CSS per creare il menu orizzontale.

Per primo, il stile generale css da applicare a ogni links:

#menu a{
width: 100px; /*la larghezza del pulsante = la larghezza del immagine di sfondo */
height: 25px; /*l’altezza del pulsante = l’altezza del immagine di sfondo/3 */
float: left; /*crea il menu orizzontale*/
background:url(btn_bg.jpg) no-repeat top; /*impostiamo l’immagine come sfondo posizionata con la sua parte superiore in alto (top) */
margin-right: 2px; /* spazio di 2px tra ogni pulsante */
}

Quando passiamo sopra il pulsante con il mouse (il stato hover), il sfondo viene spostato verso l’alto e posizionata centralemente usando la proprietà CSS background-position e il valore center:

#menu a:hover{
background-position: center;
}

Manca solo di impostare il stato selezionato al pulsante in base alla pagina dove si troviamo.
Usando solo i css si può dare un nome di classe al link scelto.

Cambiamo l’HTML:

<div id=”menu”>
<a href=”#nogo” class=”selezionato”></a>
<a href=”#nogo”></a>
</div>

E aggiungiamo il stile CSS per quella classe dove il sfondo viene spostato verso l’alto e la sua parte inferiore posizionata in base alla parte inferiore del nostro pulsante usando la proprietà CSS background-position e il valore bottom:

#menu a.selezionato, #menu a.selezionato:hover{
background-position: bottom;
}

NB: la posizione del immagine è impostata anche al stato hover del link selezionato per evitare che il sfondo si muove quando si passa sopra con il mouse.

Condividi questo articolo su