Scomparsa tasti navigation

[kesar84]

Salve a tutti, ho un problema di immagine con le navigation.
Creo le <a> all'interno di un <div> navigation e vi inserisco i relativi collegamenti alle altre pagine.
Nel CSS richiamo tramite class i relativi tasti della navigation e gli metto uno sfondo quando sono spenti e con il comando hover metto un'altro sfondo quando si va cn il mouse sopra mentre per la pagina attiva, richiamandolo con l'id rimane lo sfondo del tasto acceso .
Il problema è che quando si apre la pagina internet, le immagini dei tasti hover, non vengono caricate contemporaneamente a quelli dei tasti spenti, ma solo quando si va con il mouse sopra parte il caricamento, facendo così sparire per qualche istante il tasto.
Come posso evitare questo problema? C'è uno script che mi fa caricare tutte le immagini insieme?

Questo è uno dei siti dove mi fa questo problema: www.massimogiuliano.it

Vi incollo di seguito i vari script.

SCRIPT HTML:

<div id="navigation">
<a href="index.html" alt="vai allo studio">
<div class="studio" id="studio"></div>
</a>
<a href="staff.html" alt="vai allo staff">
<div class="staff"></div>
</a>
<a href="terapie.html" alt="vai alle terapie">
<div class="terapie"></div>
</a>
<a href="dove_siamo.html" alt="vai a dove siamo">
<div class="dove_siamo"></div>
</a>
<a href="contatti.html" alt="vai a contatti">
<div class="contatti"></div>
</a>

</div>


SCRIPT CSS:

.studio
{background: url(images/Studio_dentistico_01.jpg) no-repeat; width: 142px; height: 57px; float: left; }

.studio:hover
{background: url(images/studio_dentistico_02.jpg) no-repeat; width: 142px; height: 57px; float: left;}

#studio
{background: url(images/studio_dentistico_02.jpg) no-repeat; width: 142px; height: 57px; float: left;}

.staff
{background: url(images/Studio_dentistico_03.jpg) no-repeat; width: 142px; height: 57px; float: left; }

.staff:hover
{background: url(images/Studio_dentistico_04.jpg) no-repeat; width: 142px; height: 57px; float: left;}

#staff
{background: url(images/Studio_dentistico_04.jpg) no-repeat; width: 142px; height: 57px; float: left;}

.terapie
{background: url(images/Studio_dentistico_05.jpg) no-repeat; width: 142px; height: 57px; float: left;}

.terapie:hover
{background: url(images/Studio_dentistico_06.jpg) no-repeat; width: 142px; height: 57px; float: left;}

#terapie
{background: url(images/Studio_dentistico_06.jpg) no-repeat; width: 142px; height: 57px; float: left;}

.dove_siamo
{background: url(images/Studio_dentistico_07.jpg) no-repeat; width: 142px; height: 57px; float: left;}

.dove_siamo:hover
{background: url(images/Studio_dentistico_08.jpg) no-repeat; width: 142px; height: 57px; float: left;}

#dove_siamo
{background: url(images/Studio_dentistico_08.jpg) no-repeat; width: 142px; height: 57px; float: left;}

.contatti
{background: url(images/Studio_dentistico_09.jpg) no-repeat; width: 142px; height: 57px; float: left;}

.contatti:hover
{background: url(images/Studio_dentistico_10.jpg) no-repeat; width: 142px; height: 57px; float: left;}

#contatti
{background: url(images/Studio_dentistico_10.jpg) no-repeat; width: 142px; height: 57px; float: left;}



GRAZIE DI TUTTO

[ac_socmel]

unisci le immagini in una soltanto e posizionala usando "background-position"
otterrai anche di fare meno richieste al server

[kesar84]

Ciao, grazie per avermi risposto.
Scusami, non ho capito bene cosa intendi con unire le immagini in una soltanto.

[ac_socmel]

cerca "css sprite" e capirai subito

[kesar84]

Grazie 1000000000000000000, era la soluzione che cercavo.
Ora devo solo provarla e sostituirla ai vari siti.
Grazie di nuovo