-
Utente di HTML.it
immagine che cambia al passaggio del mouse
ciao ragazzi,
dovrei copiarel 'effetto della nuova barra di navigazione di html.it cioè per intenderci, l'effetto di cambio immagine quando ci passo sopra con il mouse.
mi aiutate?
grazie!
-
Utente di HTML.it
ragazzi come potrei fare?
grazie!
-
Utente di HTML.it
direi che un modo è con la pseudoclasse :hover che attiva lo stile solo al passaggio del mouse..
un altro potrebbe essere con il rollover, ma non lo conosco bene..cerca qualcosa su questi argomenti (:hover è ben spiegato nella guida ai CSS qua su html.it)
ciao!
p.s. forse anche con Java script, ma sono proprio ignorante in quest'ultimo campo..
-
Utente di HTML.it
ecco, io vorrei cercare di capire le varie differenze ed adottare la via migliore...
rollover l'ho sentito già...
-
Utente di HTML.it
La tecnica migliore credo sia quelle che segue i seguenti princìpi:
- per prima cosa occorre realizzare il menu utilizzando una struttura di markup adeguata, ad esempio:
- Home
- Blog
- Foto
[*] poi occorre realizzare le due immagini di sfondo; poniamo il caso di averlo fatto, usando come dimensioni 200×50 px²;
[*] adesso passiamo ai fogli di stile; dobbiamo porre i vari elementi di lista su una stessa riga, dare una dimensione fissa ai link (200×50) ed applicare l'immagine di sfondo:
codice:
ul,
ul *
{
margin:0; padding:0;
}
li
{
float:left;
width:200px; height:50px;
list-style-type:none;
}
li a
{
display:block;
width:200px; height:50px;
background:url('sfondo.gif') no-repeat 50% 50%;
text-align:center; text-decoration:none;
}
li a:hover
{
background-image:url('sfondo-hover.gif');
}
[/list]
In questo modo, come noterai, i pulsanti rimarranno testuali e le immagini saranno gestite come sfondi, favorendo qualsiasi tipo di dispositivo, anche, ad esempio, quelli usati dalle persone non vedenti per navigare in rete.