Con las últimas sugerencias de Ramón Corominas y algún añadido, el roll-over
funciona en todos los navegadores salvo en IE 6.
Los errores se deben a que uso un PNG para la máscara, y no hace la
transparencia, también que uso "position", "z-index", y no si por la forma
en anidar los <a> y <span> porque no hace el link ...
En lo referente al IE 6:
Ya se habló en otros emails del tema y yo al menos paso totalmente de hacer
webs compatibles con IE 6 si implica más trabajo o dejar de hacer cosas que
cumplan los estándares.
Basándome en estadísticas de Google Analytics que obtengo de webs de
clientes, la tendencia es que la presencia de IE 6 es cada vez menos
significativo.
Quedándome con un caso de una web de embalajes, donde se puede suponer
público de edad, profesionales, no joven geek a la última que actualiza su
navegador, se observa que IE 66%, FF 23 %, CHR 7%
Del porcentaje de IE, tenemos IE 8 46%, IE 6 29%, IE 7 23 %
Así que el 29% de 66% es el 19% del total de usuarios.
Que serán usarios de XP y SO anteriores que no tienen activadas las
actualizaciones de Windows.
Tienes que valorar si tu clientes o su target de clientes son usuarios de IE
6 y si tu cliente está dispuesto a pagar el esfuerzo extra.
Saludos,
--
Jairo Ochoa
El 16 de abril de 2010 14:12, Rafa Artacho <teme...@gmail.com> escribió:
> Buenas tardes:
>
> Estoy intentando hacer un menú desplegable exclusivamente con CSS, y me
> gustaría probar esta técnica,
> ¿hay alguna forma de que funcione en IE6 sin usar JS?
>
>
> 2010/4/15 Jairo Ochoa <jairo.oc...@gmail.com>
>
> > La estructura actual de la pagina es algo así:
> >
> > <h1>Titulo de página</h1>
> >
> > <h2>Primer elemento</h2>
> > <img>
> > breve descripción
> >
> > <h2>Segundo elemento</h2>
> > <img>
> > breve descripción
> >
> > <h2>Tercer elemento</h2>
> > <img>
> > breve descripción
> >
> >
> > el <h2> a su vez contiene el enlace
> >
> >
> > Me gusta esa solución que das, con 2 <span>, y me parece perfecta
> mientras
> > visualmente haga lo mismo y creo que sí
> >
> > Tú juegas con los z-index, ¿sería lo mismo hacerlo con display
> block/none?
> >
> >
> >
> > Saludos,
> >
> > --
> >
> > Jairo Ochoa
> >
> >
> > El 15 de abril de 2010 17:06, Ramón Corominas
> > <lis...@ramoncorominas.com>escribió:
> >
> > > Sí, la validación fallaría porque igualmente el <div> es elemento de
> > > bloque. De todos modos, sigo sin entender por qué usas <h2>, porque
> > > aparentemente no estás encabezando contenidos de ningún tipo (el <h2>
> > > debería encabezar contenidos en el documento donde lo pones, no en el
> > > siguiente). Otra cosa es que puedes poner dos <span> con clases
> > > distintas con display: block; y solaparlos para hacer ese efecto de
> > > ocultamiento/desocultamiento. Más o menos la idea básica sería algo
> así:
> > >
> > > <div class="roll">
> > > <a>
> > > <span class="img1"></span><!-- imagen visible por defecto -->
> > > <span class="img2"></span><!-- imagen oculta que se quiere mostrar en
> el
> > > rollover -->
> > > </a>
> > > </div>
> > >
> > > .img1, .img2 { width: 100%; height: 100%; display: block; position:
> > > absolute; top: 0; left: 0; }
> > > .roll a .img1 { z-index: 0; }
> > > .roll a .img2 { z-index: 1; }
> > > .roll a:hover .img1, .roll a:focus .img1 { z-index: 1; }
> > > .roll a:hover .img2, .roll a:focus .img2 { z-index: 0; }
> > >
> > > De esa manera además cubres el acceso con teclado, que de otro modo no
> > > se activaría si el usuario navega con el tabulador.
> > >
> > > Saludín,
> > > Ramón.
> > >
> > > Jairo Ochoa escribió:
> > > > Aunque la imagen no puede ir dentro del H2 ya que está presente
> > > > antes de que se muestre el H2 y queda debajo, tapada por el
> > > > background/mascara del H2
> > > >
> > >
> > > _______________________________________________
> > > Lista de distribución Ovillo
> > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > > http://lists.ovillo.org/mailman/listinfo/ovillo
> > >
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
