overlay pulsanti con css

[pettedemon]

overlay pulsanti con css

Ciao a tutti.
Io devo fare un menu con 20 pulsanti, ogni pulsante ha un overlay, è tutto grafico, per ogni pulsante devo farmi una classe in css ?

#richiedi a{
	float: left;
	width: 220px;
	height: 45px;
		text-align: left;
	background:url(../images/richiedi.png) no-repeat top;
}
 a:hover{
	float: left;
	width: 220px;
	height: 45px;
		text-align: left;
	background:url(../images/richiedi.png) no-repeat bottom;
}

Ho visto che usando l'overlay di default su dreamweaver che agisce tramite javascript è molto lento il tutto....

Grazie!!

[karedas]

Ciao Pattedemon.

Purtroppo se utilizzerai una combinazione grafica diversa per ciascun link dovrai utilizzare classi o id diversi per ogni tuo pulsante.
Ciò non toglie che puoi comunque sfoltire grande parte del codice univocando valori identici per tutti i tuoi link.

Prendendo spunto dal codice che hai inserito, ad esempio, tieni presente che non è necessario ripetere per il mouse-hover i soliti attributi che hai dato all'elemento naturale (quindi il link in mouse-out).

Nel css al selettore "#richiedi a:hover" dovrai unicamente cambiare o aggiungere relativi attributi adibiti al mouse-hover come ad esempio il colore del testo o lo sfondo.

Se invece il tuo scopo è quello di definire effetti , sfondi, colori e grandezze diverse per ogni tuoi link, allora dovrai definire uno o più id/classi per ogni elemento sempre però raggruppando in un selettore univoco gli attributi uguali per tutti.

Esempio:

.menuprincipale #home, .menuprincipale #chi_siamo, .menuprincipale #contattaci{
float:left; 
height:46px;
text-align:left;
}
.menuprincipale{
color:#333;
background:url('home.png') no-repeat top left;
}
.menuprincipale{
background:url('chi_siamo.png') no-repeat top left;
color:#fff;
}
.menuprincpale{
background:url('contattaci.png') no-repeat top left;
color:#345345;
}

```A sua volta, nel mio esempio, si può omettere la classe di referenza ".menuprincipale".  Può essere compattato ulteriormente dichiarando un'unica volta per tutti i tuoi link il parametro "no-repeat" e "top left".

Oppure se vuoi essere pignolo e vuoi migliorare i tempi di caricamento, puoi creare un'unica immagine contenente tutte le immagini dei tuoi link affiancate l'una all'altra e a sua volta, attraverso le coordinate inseribili nell'attributo "background", posizionarle.

Quest'ultima parte è un pò più complessa se non hai molta dimestichezza con codice e grafica. Però è comunque uno spunto e sempre più utilizzato nei siti odierni.

[pettedemon]

Ciao karedas,
ti ringrazio per la risposta e i suggerimenti.
Ho visto che ultimamente si tende a fare una immagine unica e poi "spostarla" per tutti i link, penso sia la soluzione migliore pero' con 20 link è da diventare un po' matti, comunque ci provero'!
Ti ringrazio!