Ciao terrasamba,
innanzitutto si possono scegliere molti metodi di "rollover", alcuni pesanti via javascript, altri molto leggeri con i css. Scegliere un metodo "javascript" vuole spesso dire appoggiarsi a librerie esistenti (jquery, prototype, mootools..) ed elaborare effetti interessanti.
La mia personale scelta è l'utilizzo del css più un'accortezza da tenere di conto durante la creazione delle immagini.
Tramite un programma di grafica crei un nuovo file. La larghezza sarà l'effettiva del tuo oggetto (il pulsante), mentre l'altezza sarà il "doppio" di quella della singola immagine.
Perchè?
Questo perchè nella prima metà superiore posizioneremo la nostra immagine in "ROLLOUT", mentre nella metà inferiore posizioneremo l'immagine con effetto "ROLLOVER".
L'operazione dovrà ovviamente essere ripetuta per ogni immagine.
Dai un "ID" ad ogni tag "<li>", riferendosi magari al testo contenuto, in modo da attribuirci ad ogni link, ad esempio "#home, #about, #music, #photo,#contact".
3)Regole css:
ul{
overflow:hidden;
}
ul li{
list:none;
float:left;
}
ul li a{
text-indent:-9999px;
display:block;
height:50px;
}
ul li a#home{
width:120px;
background:url('../cartella/home.jpg') no-repeat left top;
}
ul li a#home:hover{
background-position:url('cartella/home.jpg') no-repeat left -50px;
}
```Aggiungi con la stessa sintassi gli altri id(voci di menù).
Sono un pò di corsa quindi non ho controllato se è corretto ciò che ti ho scritto, fammi sapere intanto se hai compreso fino ad adesso.
Ciao!
P.S. Ah per l'appunto io e mariaski abbiamo rispoto nel solito medesimo attimo, meglio per te :)
