Menú de imágenes con rollover

[hey_alan]

Bien, tengo un menú lateral del siguiente sitio:

http://cybershaman.awardspace.com/

Para lograrlo, utilicé el siguiente html:

Código:

<div id="lateral">
<ul>
<li class="menu" id="menu-portada"><a href="index.php" title="Portada" accesskey="1">Portada</a></li>
<li class="menu" id="menu-nosotros" ><a href="nosotros.php" title="Nosotros" accesskey="2">Nosotros</a></li>
<li class="menu" id="menu-servicios"><a href="servicios.php" title="Servicios" accesskey="3">Servicios</a></li>
<li class="menu" id="menu-clientes"><a href="clientes.php" title="Clientes" accesskey="4">Clientes</a></li>
<li class="menu" id="menu-contacto"><a href="contacto.php" title="Contacto" accesskey="5">Contacto</a></li>
</ul>
</div>

y el css es este:

Código:

#lateral ul{list-style:none; list-style-type:none; margin:0px; padding:0px;}
#lateral li{padding:0px;}
.menu{width:160px; height:60px; margin:auto; margin-bottom:8px; overflow:hidden; text-indent:-5000px;}
.menu a{width:160px; height:60px; display:block; border:0;}
/*Botones*/
#menu-portada{background:url(graficos/btn_portada2.gif);}
#menu-portada a{background:url(graficos/btn_portada1.gif);}
#menu-portada a:hover{background:none;}
#menu-nosotros{background:url(graficos/btn_nosotros2.gif);}
#menu-nosotros a{background:url(graficos/btn_nosotros1.gif);}
#menu-nosotros a:hover{background:none;}
#menu-servicios{background:url(graficos/btn_servicios2.gif);}
#menu-servicios a{background:url(graficos/btn_servicios1.gif);}
#menu-servicios a:hover{background:none;}
#menu-clientes{background:url(graficos/btn_clientes2.gif);}
#menu-clientes a{background:url(graficos/btn_clientes1.gif);}
#menu-clientes a:hover{background:none;}
#menu-contacto{background:url(graficos/btn_contacto2.gif);}
#menu-contacto a{background:url(graficos/btn_contacto1.gif);}
#menu-contacto a:hover{background:none;}

*Se puede resumir, pero lo dejé así para que tenga precarga*

Hasta ahí todo funciona a la perfección: Con css activado e imágenes desactivadas se ve correcto, y con css desactivado también.

El problema viene cuando desactivo las imágenes y dejo el css: el menú simplemente es invisible.

¿Existe alguna solución? ¿Debería preocuparme por eso?

Muchas gracias de antemano.

PD: Como las imágenes no son simplemente decorativas, pensé ponerlas en el html y cambiar su fondo con "a:hover img" pero desafortunadamente no funciona en algunos browsers.

[Raulmmmm]

Se puede poner un background-color: blue; por ejemplo, si el menú no tiene transparencia, se verá el color de fondo cuando no haya imágenes.

PD: Muy bonita tu web.

[hey_alan]

Muchas gracias por tu respuesta, pero lo que necesito es que si se desactivan las imágenes, aparezca un "texto alternativo". Obviamente los divs no pueden tener uno xP, entonces necesitaría poner imágenes en el mismo html con alt pero no sé como lograr un rollover de esa manera usando css.

[cleft]

Muy buena consulta, Alan. Es bueno que te preocupes por mantener la accesabilidad del menu aun para la gente que desactiva las imagenes.

Te recomiendo que uses el siguiente metodo publicado por Dave Shea: "Shea Enhancement" (se encuentra al final del documento)
http://www.mezzoblue.com/tests/revised-image-replacement/

Lo que te puedo adelantar es que con ello necesitaras agregar un <span></span> antes de cada texto.

[hey_alan]

Muchas gracias.

Aún no he conseguido implementarlo debido a que tengo vínculos y a:hover entrometidos, pero me ha dado gran orientación.

Prácticamente lo que hacen es "tapar" el texto con la imagen, para que al desactivarla quede al descubierto.

Habrá que "cránearle" un poco xP.

Saludos.