Foros del Web » Creando para Internet » CSS »

Menú de imágenes con rollover

Estas en el tema de Menú de imágenes con rollover en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 28/02/2008, 12:17
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Pregunta Menú de imágenes con rollover

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.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán

Última edición por hey_alan; 28/02/2008 a las 13:04
  #2 (permalink)  
Antiguo 28/02/2008, 12:20
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Menú de imágenes con rollover

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.
  #3 (permalink)  
Antiguo 28/02/2008, 12:37
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Re: Menú de imágenes con rollover

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.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #4 (permalink)  
Antiguo 28/02/2008, 15:37
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Menú de imágenes con rollover

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.
  #5 (permalink)  
Antiguo 28/02/2008, 17:31
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Re: Menú de imágenes con rollover

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.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:33.