duda existencial con rollover accesible

Sintak · #1 (**permalink**) 11/02/2010, 15:13

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<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?

Sintak · #2 (**permalink**) 13/02/2010, 18:04

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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>rollover accesible en css</title>

Código CSS:

Ver original<style type="text/css" charset="ISO-8859-1" >
.ejemplo {
width:140px;
height:140px;
background-image:url('fondo.png');
}
.ejemplo a {
width:140px;
height:140px;
z-index:2;
}
.ejemplo img {
width:140px;
height:140px;
}
.ejemplo a.hover img {
width:140px;
height:140px;
display:none;
visibility:hidden;
z-index:1;
}
</style>

Código HTML:

Ver original</head>
  <body>
  <div id="ejemplo" >
  <a href="#" id="ejemplo"><img src="img2bn.jpg" width="140px" height="140px" /></a>
  </div>
  </body>
</html>

Moderadores, podeis mover esto a HTML o CSS?

Gracias

Carlangueitor · #3 (**permalink**) 13/02/2010, 21:14

Prueba así:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
    <head>
        <title>Pruebas de Hover</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <div id="ejemplo" >
            <a href="#"><span>Enlace</span></a>
        </div>
    </body>
</html>

Código CSS:

Ver original#ejemplo a{
    width: 140px;
    height: 140px;
    display: block;
    background: ulr(fondo.jpg) no-repeat; /*imagen normal*/
    }
#ejemplo a:hover {
    background: url(fondo1.jpg) no-repeat; /*imagen hover*/
    }
#ejemplo a span{
    display: none;
    }

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

Saludos

JavierB · #4 (**permalink**) 14/02/2010, 03:26

Hola Sintak

Muevo tu tema al foro de CSS desde Web general.

Saludos,

Sintak · #5 (**permalink**) 14/02/2010, 06:48

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<a href="#">

?

Carlangueitor · #6 (**permalink**) 14/02/2010, 13:23

Cita:

Iniciado por Sintak

Por cierto, porque le asigna un ID a

Código HTML:

Ver original<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

Sintak · #7 (**permalink**) 14/02/2010, 14:11

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 :)