Re: [Ovillo] markup correcto de una imagen reemplazando un texto
Yo siempre uso 'visibility: hidden', ya que como dices usando 'display: none' los lectores de pantalla no muestran el contenido al que se aplica la propiedad, y no he encontrado ningún problema con ningún navegador (¡milagro!). En cuanto a las formas, para mi son totalmente válidas tanto la 3 como un híbrido entre la 1 y la 2, es decir poner el enlace con su 'title' y la imagen con su 'alt'. El 'alt' lo único que hace es que los navegadores que no soporten o tengan activadas las imágenes muestren su texto. El 'title' de un enlace lo describe. Por tanto no hay problema en usar las dos propiedades al mismo tiempo, pese a que IE se empeñe en tratar los 'alt' como si de un 'title' se tratara. ___ 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
Re: [Ovillo] markup correcto de una imagen reemplazando un texto
Hola Martín,
http://www.mezzoblue.com/tests/revised-image-replacement/
http://www.disenorama.com/articulos/reemplazo-de-textos-una-comparacion
Ahí te dejo otras opciones por si dentro de tu público objetivo hay gente
que navegue con imágenes off, si por el contrario, estas convencido de que
todos tus usuarios tienen un super ordenador sin problemas de banda... pues
la tercera opción con visibility:hidden creo que es la más aceptable...
Saludos!!
El día 10/01/07, Martin Sarsale [EMAIL PROTECTED] escribió:
Si, la tres es la que tiene mas onda.
Pero ponerle display:none causa que algunos lectores de pantalla no
lean el
texto, según tengo entendido, entonces la forma más linda que yo conozco
es:
li class=itemHomeHome/li
li {
text-indent: -5000em;
}
li.itemHome {
background: url(../images/menuHome.png);
}
para mi, to the hell with bad browsers incluye lectores de pantalla.
si el CSS es para screen y el lo interpreta, no es problema mio.
es demasiado duro lo que digo?
___
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
[Ovillo] markup correcto de una imagen reemplazando un texto
[EMAIL PROTECTED]:
Tengo un menu de navegacion en un ul, cada item es un li. Ahora,
quiero mostrar imagenes en vez de textos ahi, cual es la manera
correcta de markupearlo?
1) lia href='/home'img src='home.png' alt='home' //a/li
2) lia href='/home' title='home'img src='home.png' //a/li
3) lia href='/home' id='home'spanHome/span/a/li
y un estilo:
#home {
background-image: url(home.png);
...
}
#home span{
display:none;
}
Creo que la mas correcta es 3), no? me parece que 2) es la que le
sigue, pero es incorrecto que aparezca una imagen en el sitio que no
agrega informacion. 1) definitivamente es la peor.
Algunas respuestas? algunas pistas? algunos links?
gracias! :)
--
Martin Sarsale - [EMAIL PROTECTED]
___
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
Re: [Ovillo] markup correcto de una imagen reemplazando un texto
El día 10/01/07, Martin Sarsale [EMAIL PROTECTED] escribió:
[EMAIL PROTECTED]:
Tengo un menu de navegacion en un ul, cada item es un li. Ahora,
quiero mostrar imagenes en vez de textos ahi, cual es la manera
correcta de markupearlo?
1) lia href='/home'img src='home.png' alt='home' //a/li
2) lia href='/home' title='home'img src='home.png' //a/li
3) lia href='/home' id='home'spanHome/span/a/li
y un estilo:
#home {
background-image: url(home.png);
...
}
#home span{
display:none;
}
Creo que la mas correcta es 3), no? me parece que 2) es la que le
sigue, pero es incorrecto que aparezca una imagen en el sitio que no
agrega informacion. 1) definitivamente es la peor.
Algunas respuestas? algunas pistas? algunos links?
Si, la tres es la que tiene mas onda.
Pero ponerle display:none causa que algunos lectores de pantalla no lean el
texto, según tengo entendido, entonces la forma más linda que yo conozco es:
li class=itemHomeHome/li
li {
text-indent: -5000em;
}
li.itemHome {
background: url(../images/menuHome.png);
}
Hace un tiempo había leído una página con todas las técnicas de image
replacement, y recomendaban esta, lamentablemente no recuerdo el link.
Suerte!
Martín.
gracias! :)
--
Martin Sarsale - [EMAIL PROTECTED]
___
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
Re: [Ovillo] markup correcto de una imagen reemplazando un texto
Si, la tres es la que tiene mas onda.
Pero ponerle display:none causa que algunos lectores de pantalla no lean el
texto, según tengo entendido, entonces la forma más linda que yo conozco es:
li class=itemHomeHome/li
li {
text-indent: -5000em;
}
li.itemHome {
background: url(../images/menuHome.png);
}
para mi, to the hell with bad browsers incluye lectores de pantalla.
si el CSS es para screen y el lo interpreta, no es problema mio.
es demasiado duro lo que digo?
___
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
Re: [Ovillo] markup correcto de una imagen reemplazando un texto
El día 10/01/07, Martin Sarsale [EMAIL PROTECTED] escribió:
Si, la tres es la que tiene mas onda.
Pero ponerle display:none causa que algunos lectores de pantalla no
lean el
texto, según tengo entendido, entonces la forma más linda que yo conozco
es:
li class=itemHomeHome/li
li {
text-indent: -5000em;
}
li.itemHome {
background: url(../images/menuHome.png);
}
para mi, to the hell with bad browsers incluye lectores de pantalla.
si el CSS es para screen y el lo interpreta, no es problema mio.
es demasiado duro lo que digo?
Es aceptable, pero todo depende de tu definición de bad browser.
Para mi un navegador malo es uno que limita la accesibilidad, no uno que la
brinda. Si tiene sus quirks, prefiero soportarlo porque le está dando una
buena funcionalidad a alguien que la necesita.
Pensándolo bien, es el mismo fundamento que para soportar IE.
Ya me confundí, tal vez tengas razón... no sé qué porcentaje de usuarios
ciegos usan JAWS o cual otro y tampoco sé cuáles son los que no muestran
elementos con display:none
Sería interesante esa información si alguien lee esto y sabe de alguna
fuente (si, me imagino que en sidar debe haber algo).
Por otro lado, display creo que también se refiere a voz. Si querés
ocultarlo de la vista, usá visibility, aunque no estoy seguro de que
consigas el mismo efecto.
Martín.
___
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
