- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- overlay pulsanti con css
-
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!!
-
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.
-
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!