Hola a todos.
He intentado hacer mi sitio lo más accesible posible, por lo que hice el siguiente código CSS para el menu lateral (Pueden ver el menú
AQUI):
Código:
.menu{width:160px; height:60px; margin:auto; margin-bottom:8px;}
.menu a{width:160px; height:60px; display:block; border:0;}
.menu a img{visibility:hidden;}
#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;}
//Etcétera...
Y el HTML:
Código:
<ul>
<li><div class="menu" id="menu-portada"><a href="index.php" accesskey="1"><img src="graficos/btn_portada1.gif" alt="Portada" border="0" /></a></div></li>
<li><div class="menu" id="menu-nosotros"><a href="nosotros.php" accesskey="2"><img src="graficos/btn_nosotros1.gif" alt="Nosotros" border="0"/></a></div></li>
</ul>
Como pueden ver, estoy ocultando la imagen con CSS utilizando "visibility:hidden;" para que no se muestre, pero poder utilizar el a:hover. De este modo, cuando se desactive CSS y no se puedan ver las capas, se mueste la imagén.
El problema se presenta cuando CSS está activado y las imagenes desactivadas, ya que (según mi teoria :P) poniendo "visiblility:hidden" también se oculta el texto alternativo.
¿Qué solución encuentran?