Nie będę tu opisywał w czym takie rozwiązanie jest lepsze od innych, bo jeżeli jeszcze nie wiesz na pewno sam się zaraz domyślisz. Zamiast tego szybko przedstawię o co chodzi i jak to zrobić. Najlepiej od razu na przykładzie:
Powiedzmy że chcemy zrobić przycisk (lub całe menu) jak to:
ale przyciski mają się zmieniać kiedy kursor znajdzie się nad nimi (rollover):
Robimy odpowiednie grafiki dla obu stanów, ale umieszczamy je w pojedynczym pliku:
Teraz kod HTML i CSS:
<style type="text/css">>
#menu a { display: block; float: left;
width: 163px; height: 67px; margin-right: 8px;
background: url('sprite-bg-ok.jpg') top left no-repeat }
#menu .menu2 { background-position: -163px 0 }
#menu .menu3 { background-position: -326px 0 }
#menu .menu1:hover { background-position: 0 bottom }
#menu .menu2:hover { background-position: -163px bottom }
#menu .menu3:hover { background-position: -326px bottom }
</style>
<div id="menu">
<a class="menu1" href="#"></a>
<a class="menu2" href="#"></a>
<a class="menu3" href="#"></a>
<div style="clear: both"></div>
</div>
...i gotowe:
W ten sam sposób można zrobić o wiele więcej. Jedynym ograniczeniem jest Wasza wyobraźnia. Można też tą metodę wykorzystać aby wszystkie tego typu grafiki umieścić w pojedynczym pliku, co nam może zaoszczędzić "requestów" do serwera - ale to już inna bajka.