menu con rollover immagini

[carloast82]

Ciao a tutti,
avrei una domanda.... tempo fa ho letto un libro di Zelman sui css e c'era una capitolo che parlava di come realizzare un menu con rollover utilizzando un'unica immagine....

qualcuno di voi sapebbe dirmi come fare o darmi qualche link a tutorial che creano menu di questo tipo..... purtroppo ho prestato il libro e non ricordo di preciso come funzionava....

spero di essermi spiegato bene...
ciao

[sonik_the_sonik]

Prova a vedere se questo fa al caso tuo!!

[carloast82]

grazie per il link... comunque sono riuscito a trovare il libro.....
che alla fine mi è servito in parte perchè non c'era il mio caso....
comunque posto il codice che ho creato nel caso possa servire a qualcuno... alla fine funziona tutto ed è abbastanza semplice.

l'immagine del menu è quella in allegato.

il codice della pagina html è questo:

<ul id="menu">
        <li id="stampa">[url="#stampa"]<span>Stampa</span>[/url]
        <li id="web">[url="#web"]<span>Web</span>[/url]
        <li id="contact">[url="#contact"]<span>Contact</span>[/url]
        [/list] 

mentre il codice del file css riguardante questo menu è questo:

/*menu di navigazione*/

#menu{
width:366px;
height:56px;
list-style: none;
margin:0px;
padding:0px;
margin-left:234px;
position:relative;
/*background:#f00;*/
}

#menu li,
#menu li a{
z-index:1;
width:122px;
height:56px;
line-height:56px;
float:left;
text-decoration:none;
}

#menu li a span{
position:relative;
z-index:-1;
}

#menu #stampa a{
background:url(../images/menu.jpg) 0 0 no-repeat;
}

#menu #stampa a:hover{
background-position:0 -56px;
}


#menu #web a{
background:url(../images/menu.jpg) -122px 0 no-repeat;
}
#menu #web a:hover{
background-position:-122px -56px;
}

#menu #contact a{
background:url(../images/menu.jpg) -244px 0 no-repeat;
}
#menu #contact a:hover{
background-position:-244px -56px;
} 

Grazie ancora per il link...

[sonik_the_sonik]

Grazie ancora per il link

Di niente!!