Menu rollover, ogni voce del menu con immagine diversa

[DoppiaZetaCT]

Salve ragazzi, ho un problema...
Ho un menu e ogni voce ha una sua immagine, tipo per la voce home c'è l'immagine homeA.png e homeB.png, la prima è accesa per il rollover del mouse, la seconda no.

Ho impostato il menu così:

		<td colspan="16" background="images/home2_04.gif">
			<div id="menu">
 <ul>[*]<a href="home.html">[*]<a href="servizi.html">[*]<a href="contatti.html">[*]<a href="dove siamo.html">[/list]
</div>
			
			
			
			</td>

Ma come dovrei fare in modo che mi cambi immagine per ogni voce?

[Mich_]

Ticonviene usare una immagine unica per ogni voce, e spostarla con il metodo degli sprite:
I fondamenti del rollover grafico: immagini, sprite e text-replacement
Creare sprite CSS
Fast Rollovers Without Preload

Comunque elimina la formattazione a tabelle, che oltre a rendere il sito non accessibile, te lo penalizza nei motori di ricerca.

Per quanto riguarda la marcatura, deve essere di questo tipo:

div id="menu">
  <ul>[*]home[*]servizi[*]<a ... href="contatti.html" ...>...[*]<a ... href="dove siamo.html" ...> ... [/list]
</div>

E poi nel CSS devi definire le caratteristiche comuni con i selettori:

menu li { ... }
menu a { ... }
menu a:hover { ... }
ecc

mentre per la scelta delle immagini dovrai usare i selettori:

menu .home { background-image: (url:images/home.png); }
menu .serv { background-image: (url:images/serv.png); }
ecc