roll over con css

[Innavoig]

sto imparando la tecnica per usare il roll over nei menù ,con immagini , questa volta però tento di farlo con i css
con i comandi , hover , link , visited , ecc ecc

ho creato un elenco di voci
poi l ho settato un pò per impostarlo nelle dimensioni adatte , poi gli ho dato la misura ad ogni singolo elemento .li
e poi nel li ho impostato dai css , lo sfondo ,
poi ho attivato alla voce li un altro comado css , con la voce hover , e gli ho impostato come immagine quell roll over ,
il tutto funziona , ma quando vado a cancellare il testo nel li , perchè ormai cì+ l immagine sotto , quindi non conta , il link scompare giustamente e quindi non funziona .
sotto vedete ciò che ho fatto se vi è chiaro.
Ora vorrei un pò capire come voi usate questa tattica.
cioè all immagine come gli fate a dare il link anche se è vuoto effettivamente ?
----------------------------------------------------

#contenitore #centro #menuroll {
width: 500px;
height: 34px;
float: right;
}
#contenitore #centro #menuroll ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#contenitore #centro #menuroll ul li {
display: inline;
padding-right: 20px;
padding-left: 20px;
float: right;
}
#contenitore #centro #menuroll .benvenuti {
background-image: url(images/benvenuto.gif);
background-repeat: no-repeat;
height: 25px;
width: 85px;
background-position: center;
}
#contenitore #centro #menuroll .benvenuti:hover {
background-image: url(images/benvenutoroll.gif);
}

------------------------------------------------------------------------
<div id="menuroll">
<ul>
<li class="contatti">Contatti
<li class="lavorieseguiti">Lavori eseguiti
<li class="servizi">Servizi
<li class="benvenuti">[/list]
</div>

[Gufo]

Forse non ho capito la domanda comunque rispondo per quello che ho capito!

linkare un'immagine

<a href="#" 
title="prova" 
target="_self">
      [img]immagine.jpg[/img]
</a>

[gabip87]

il testo serve anche se c'è l'immagine (pensa ai motori di ricerca o ai browser che non interpretano i fogli di stile). lo nascondi via CSS in questo modo:

text-indent: -9999px;

per far coprire al link tutta l'area della lista puoi fare in questo modo:

a
{
   display: block;
   width: 100%;     /* la prende dal contenitore, che in questo caso è il tag[*] */
   height: 100%;    /* la prende dal contenitore, che in questo caso è il tag[*] */
}

ti segnalo inoltre che è possibile fare il rollover con una sola immagine sfruttando la proprietà 'background-position'. se non sbaglio qui su HTML.it c'è un articolo che spiega il procedimento passo passo. dovrebbe chiamarsi 'rollover con preload' o qualcosa del genere.