Foros del Web » Creando para Internet » CSS »

duda existencial con rollover accesible

Estas en el tema de duda existencial con rollover accesible en el foro de CSS en Foros del Web. Buenas Llevo to el dia comiendome el tarro, estoy intentando hacer un rollover con dos imagenes, una encendida y otra apagada y quiero hacerlo de ...
  #1 (permalink)  
Antiguo 11/02/2010, 15:13
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
duda existencial con rollover accesible

Buenas

Llevo to el dia comiendome el tarro, estoy intentando hacer un rollover con dos imagenes, una encendida y otra apagada y quiero hacerlo de manera que, si se desactivara javascript se quedara la imagen iluminada, pero por mas vueltas que le doy no le veo la solución.

Se puede hacer el rollover con [URL="http://www.desarrolloweb.com/articulos/--0--.html"]javascript[/URL] o con [URL="http://www.desarrolloweb.com/articulos/2362.php"]CSS[/URL].

La respuesta podria ser facil: hazlo con css y será accesible, pero el sistema se lo quiero aplicar a "pestañas" y cada una llevaría una imagen distinta de encendido y apagado.

Con javascript se facilita la tarea ya que solamente poniendo esta linea de código

Código Javascript:
Ver original
  1. <img border=0 src="apagada.gif" onmouseover="this.src='encendida.gif'" onmouseout="this.src='apagada.gif'">

y cambiando la imagen en cada pestaña valdría, pero si no funcionara javascript las pestañas se quedarían apagadas, por lo que no es factible.

haciendolo CSS es muy tedioso y menos efectivo.

Se sabe de alguna otra manera?
  #2 (permalink)  
Antiguo 13/02/2010, 18:04
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: duda existencial con rollover accesible

Vale, se me ocurrio una idea pero no funciona, no se porque, alguien mas experimentado querría dar su idea?

este es el código:

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.   <head>
  3.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  4.   <title>rollover accesible en css</title>
Código CSS:
Ver original
  1. <style type="text/css" charset="ISO-8859-1" >
  2. .ejemplo {
  3. width:140px;
  4. height:140px;
  5. background-image:url('fondo.png');
  6. }
  7. .ejemplo a {
  8. width:140px;
  9. height:140px;
  10. z-index:2;
  11. }
  12. .ejemplo img {
  13. width:140px;
  14. height:140px;
  15. }
  16. .ejemplo a.hover img {
  17. width:140px;
  18. height:140px;
  19. display:none;
  20. visibility:hidden;
  21. z-index:1;
  22. }
  23. </style>
Código HTML:
Ver original
  1. </head>
  2.   <body>
  3.   <div id="ejemplo" >
  4.   <a href="#" id="ejemplo"><img src="img2bn.jpg" width="140px" height="140px" /></a>
  5.   </div>
  6.   </body>
  7. </html>

Moderadores, podeis mover esto a HTML o CSS?

Gracias
  #3 (permalink)  
Antiguo 13/02/2010, 21:14
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: duda existencial con rollover accesible

Prueba así:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  3.     <head>
  4.         <title>Pruebas de Hover</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     </head>
  7.     <body>
  8.         <div id="ejemplo" >
  9.             <a href="#"><span>Enlace</span></a>
  10.         </div>
  11.     </body>
  12. </html>
Código CSS:
Ver original
  1. #ejemplo a{
  2.     width: 140px;
  3.     height: 140px;
  4.     display: block;
  5.     background: ulr(fondo.jpg) no-repeat; /*imagen normal*/
  6.     }
  7. #ejemplo a:hover {
  8.     background: url(fondo1.jpg) no-repeat; /*imagen hover*/
  9.     }
  10. #ejemplo a span{
  11.     display: none;
  12.     }

Estabas seleccionando classes en ligar de id's, el punto es para class y el hash es para id.

Saludos
__________________
Grupo Telegram Docker en Español

Última edición por Carlangueitor; 14/02/2010 a las 15:33
  #4 (permalink)  
Antiguo 14/02/2010, 03:26
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola Sintak

Muevo tu tema al foro de CSS desde Web general.

Saludos,
  #5 (permalink)  
Antiguo 14/02/2010, 06:48
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: duda existencial con rollover accesible

Gracias JavierB

Claro Carlangueitor, asigné clases, para poder aplicar ese estilo a cualquier capa, imaginemos que son pestañas de un sistema de tabs.

Por cierto, porque le asigna un ID a
Código HTML:
Ver original
  1. <a href="#">
?

Última edición por Sintak; 14/02/2010 a las 07:28
  #6 (permalink)  
Antiguo 14/02/2010, 13:23
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: duda existencial con rollover accesible

Cita:
Iniciado por Sintak Ver Mensaje
Por cierto, porque le asigna un ID a
Código HTML:
Ver original
  1. <a href="#">
?
Perdón, había copiado tu HTML es sin el ID.

Bueno si utilizaste clases para la capa tenias que haberle puesto class en lugar de id y listo.

Saludos
__________________
Grupo Telegram Docker en Español
  #7 (permalink)  
Antiguo 14/02/2010, 14:11
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: duda existencial con rollover accesible

Bua.... fallo mio, jajajaj cosas de principiante. Muchas gracias por todo Carlangueitor, me queda muy muy poco por terminar mi rollover accesible (después de casi un mes...)

Cuando lo tenga listo, lo publicaré aquí

Gracias :)

Etiquetas: existencial, rollover
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 07:21.