sostituzione immagini a testo del link!

[stil0s0]

ragazzi,
qual è la migliore soluzione per sostituire immagini a link? che cambiano anche con l'hover?

io usavo questa, ma non mi convince

----HTML

<ul id="menu">
<li class="homeLi"><span class="currenthomeSpan homeExpl" ></span>Azienda
<li class="contattiLi"><span class="contattiSpan"></span>Contatti
[/list]

-----CSS

.currenthomeSpan {

background-image:url(../img/menu_azienda_hover.png);

background-repeat: no-repeat;

position: absolute;

height:110px;

width:156px;

}

.homeSpan {

background-image:url(../img/menu_azienda.png);

background-repeat: no-repeat;

position: absolute;

height:110px;

width:156px;

}

.homeSpan:hover {

background-image:url(../img/menu_azienda_hover.png);

background-repeat: no-repeat;

position: absolute;

height:110px;

width:156px;

}



.contattiSpan {

background-image:url(../img/menu_contatti.png);

background-repeat: no-repeat;

position: absolute;

height:115px;

width:166px;

}



.contattiSpan:hover {

background-image:url(../img/menu_contatti_hover.png);

background-repeat: no-repeat;

position: absolute;

height:115px;

width:166px;

}



.currentcontattiSpan{

background-image:url(../img/menu_contatti_hover.png);

background-repeat: no-repeat;

position: absolute;

height:115px;

width:166px;

}







.homeA { position:relative;

height:115px;

width:156px;



}



.contattiA { position:relative;

height:115px;

width:166px;



}

[codencode]

La cosa migliore, anche per l'accessibilità (accesso da parte dei diversamente abili), è mettere le immagini che vuoi usare dentro i link (non utilizzarle come sfondi), avendo cura di inserire il testo alternativo (attributo alt).
Qualcosa del genere:

[img]...[/img]

Poi, nel foglio di stile

a img {
     background: ...;
}

a img:hover {
     background: ...;
}