Creare un rollover css con uno sprite


ho creato in photoshop questo sprite: ogni rettangolo è 135 px per 34 px
external image QaLai.png

in dreamweaver

1) creo la lista con i link

2) setto l'id dell'elemento ul (lo chiamo "navbar") esempio da tasto destro su ul nella barra di stato e poi modifica tag

3) levo i puntini dall' elenco (regola )

#navbar {list-style-type:none}


4)metto il blocchi in orizzontale

#navbar li {
float: left;
}

5) faccio comportare i link come blocchi e li dimensiono

#navbar li a {
display: block;
height: 34px;
width: 135px;
}

6) aggiungo le classi ai link

7) imposto gli sfondi alle classi

a.home {
background-image: url(http://i.imgur.com/QaLai.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
 
a.products {
background-image: url(http://i.imgur.com/QaLai.png);
background-position: -135px 0px;
}
 
a.services {
background-image: url(http://i.imgur.com/QaLai.png);
background-position: -270px 0px;
}

qui l'ho fatto solo per i primi tre box

8) nascondo le etichette con la proprietà text-indent


#navbar li a {
display: block;
height: 34px;
width: 135px;
text-indent: -999px;
}



9) scrivo le classe hover

a.home:hover {
background-position: 0px -34px;
}
 
a.products:hover {
background-position: -135px -34px;
}


etc



ed ecco il risultato finale