[Ovillo] Duda Rollover

[Ramón Corominas]

Para mí la mejor técnica es la que comentamos hace poco de "meter bajo 
la alfombra".

Colocas la imagen como fondo de un <span>, sobre el texto del enlace que 
puede ir en otro span, por ejemplo (a lo mejor ni siquiera necesitas ese 
segundo <span>). Ese fondo tapará al texto (que tienes que dimensionar 
bien para que no se "salga", claro), y cuando hagas el :active, :hover o 
:focus en el <a>, colocas la imagen de reemplazo al <span> superior.

Más  o menos:

...
<ul id="menu">
  <li id="li-1"><a href="1.htm"><span class="bkg"></span><span 
class="txt">Enlace 1</span></a></li>
  ...
</ul>

#menu li, #menu li a, #menu li a span {
  display: block;
  position: relative;
  width: 4em;
  height: 1em;
}
#menu li a span.texto {
  z-index: -1;
  position: absolute;
  font-size: 1em;
}
#menu li a span.bkg {
  z-index: 1;
  position: absolute;
  background-repeat: no-repeat;
}
#menu li#li-1 a:link span.bkg { background-image: url('menu1-lnk.png'); }
#menu li#li-1 a:active span.bkg ,
#menu li#li-1 a:hover span.bkg ,
#menu li#li-1 a:focus span.bkg { background-image: url('menu1-hov.png'); }

Creo que algo así tiraría bien... Ya nos contarás <guiño>

Saludín,
Ramón.