Salve a tutti, l'altro giorno ho trovato su internet un foglio di stile che mi permetteva di avere l'effetto rollover senza l'uso di js e con l'ausilio di una sola immagine (non elenco i dettagli perchè sono sicuro che lo conosciate anche voi). Nel mio sito ho un menù verticale e uno orizzontale e ho pensato di creare un foglo di stile per ogni menù. Questo è il codice del menù verticale:
<style>
#menu{
width:178px;
text-align:center;
font-family:"verdana";
font-size:12px;
}
#menu a {
height:42px;
padding-top:9px;
display:block;
color:#000;
text-decoration:none;
background: url("http://midiclorian.altervista.org/index_file/rollover.jpg") 0 0 no-repeat;
}
#menu a:hover {
background-position: -178px 0;
}
#menu a:active {
background-position: -356px 0;
}
</style>
<div id="menu">Home</div>
E questi i codici del menù orizzontale:
<style>
#menu{
width:122px;
text-align:center;
font-family:"arial";
font-size:12px;
}
#menu a {
height:33px;
padding-top:9px;
display:block;
color:#000;
text-decoration:none;
background: url("http://img523.imageshack.us/img523/8978/rollovertopoi5.jpg") 0 0 no-repeat;
}
#menu a:hover {
background-position: -122px 0;
}
#menu a:active {
background-position: -244px 0;
}
</style>
<div id="menu">Home</div>
</style>
Praticamente sono identici nella struttura, cambiano solo i links delle immagini e le misure.
I problemi sono questi, intanto non riesco a mettere la scritta bianca, la seconda immagine ha lo sfondo nero e quendo scrivo ad es. "Home" viene in nero e non si legge;
Il secondo problema, e forse quello più grave, è questo: quando vado ad inserire entrambi i codici nella pagina si mischiano, vi spiego meglio, praticamente compare ad entrambi la stessa immagine di sfondo anche se i link portano a due immagini diverse.
Spero che sono riuscito a farvi capire il mio problema e che riusciate a risolverlo.
Grazie in anticipo per le risposte!
