En Armonía explica una buena técnica de reemplazo accesible de textos por imágenes. El problema es, como dice su autor, que requiere incluir un feo
. La razón de este SPANSPAN es, sin duda, lograr una interoperabilidad entre diferentes navegadores. Eso no quita que existan métodos más limpios (y menos ínteroperables).
No planeo explicar cosas básicas, así que es mejor que primero lean y entiendan el artículo original.
Usando pseudo elementos y posicionamiento absoluto
Suponiendo el siguiente código HTML:
<p class="reemplazado">
<a href="#" title="Enlace de ejemplo">¡Voy a ser sustituido!</a>
</p>El truco sería crear un pseudo elemento (usando :after o :before) dentro del elemento A, que luego será posicionado absolutamente de manera que oculte el texto del enlace.
Primero debemos definir un tamaño para A de igual tamaño al de la imagen que usaremos como reemplazo, además de cambiar su propiedad position a relative para poder luego posicionar correctamente y absolutamente el pseudo elemento.
.reemplazado a {
display: block;
position: relative;
width: 200px;
height: 200px;
}Luego creamos el pseudo elemento con la imagen, y lo posicionamos.
.reemplazado a:after {
content: url(imagen.png);
position: absolute;
top: 0;
left :0;
}Ejemplo 1. Claro que esta técnica tiene dos ligeros problemas:
- De los navegadores bajo Windows, de momento, sólo funciona en Opera (comprobado desde la versión 7.5). Firefox 1.5, aunque implementa contenido generado, no ha implementado el soporte para ciertas propiedades sobre el mismo, como
positionyfloat. Safari 1.3 y Konqueror 3.4 muestran correctamente el ejemplo. - En Opera, cuando la imagen no se muestra, se muestra un pequeño contenedor que dice
y que se superpone al texto a reemplazar.image
Usando pseudo elementos y margenes negativos
Que la técnica anterior no funcione en Gecko me produce cierto cargo de conciencia, así que les presento una solución. El truco consiste en definirle un tamaño a la letra del texto a reemplazar, y luego mover la imagen con margenes negativos.
.reemplazado a {
display: block;
width: 200px;
height: 200px;
text-decoration: none;
font-size:1em;
line-height:1;
}
.reemplazado a:after {
content: url(imagen.png);
display:block;
margin-top:-1.1em;
}El margen negativo es apenas superior al tamaño de la letra porque si fuera igual, Firefox muestra una linea de 1px del texto original. Fijensé de no combinar esta técnica con la anterior. Ejemplo 2.
Tengan en cuenta que no es obligatorio usar content: url(imagen.png) en los dos ejemplos anteriores. También es posible crear un pseudo elemento vacío y luego aplicarle un fondo:
.reemplazado a:after {
content: "";
display:block;
background:url(imagen.png) no-repeat top left;
width:200px;
height:200px;
}Creando un pseudo elemento con Javascript
Que las dos técnicas anteriores no funcionen en Internet Explorer puede resultarle molesto a algunos, así que les propongo otra posibilidad: crear el famoso feo
con Javascript. Sólo por una cuestión práctica (para mí), cambiaré el atributo spanclass de P por un id con el mismo valor.
<p id="reemplazado">
<a href="#" title="Enlace de ejemplo">¡Voy a ser sustituido!</a>
</p>Ahora sólo es cuestión de crear el elemento SPAN y agregarlo dentro de A. Los que conocen de Javascript, sepan disculpar si el código es demasiado básico (por ejemplo, sepan disculpar mi window.onload):
function crearspan () {
var span = document.createElement('span');
document.getElementById('reemplazado').childNodes[0].appendChild(span);
}
window.onload = crearspan;Ahora que ya tenemos un elemento hueco para aplicar los estilos, declaramos las propiedades correspondientes:
#reemplazado a {
display: block;
position: relative;
width: 200px;
height: 200px;
}
#reemplazado a span {
background: url(imagen.png) no-repeat top left;
width: 200px;
height: 200px;
display:block;
position: absolute;
top: 0;
left :0;
}Ejemplo 3. Detalle divertido: Internet Explorer 6 SP2 lanza una advertencia de seguridad al ejecutar este script.
Usando contenido generado sobre el elemento
También es posible reemplazar directamente el contenido del elemento.
.reemplazado a {
content: url(imagen.png);
}Ejemplo 4. La opción de usar content es una propuesta recién en CSS3 (CSS3 Generated and Replaced Content Module: Inserting content into an element: the '::before' and '::after' pseudo-elements) y, de los navegadores, tengo entendido que sólo funciona en Opera. Lo malo (horrible) es que, si no muestra la imagen, Opera no muestra el texto original. Está más allá de mi conocimiento si es una mala implementación o realmente debe ser así.
22 comentarios. Agregá el tuyo →
are
Muy parecida a Definitive Solution to Image Replacement no?
24 de abril de 2006
Franco Giménez » Reemplazo de texto por imagenes usando contenido generado
[…] Reemplazo de texto por imagenes usando contenido generado. Otra joyita de Fede. […]
24 de abril de 2006
FrancoG
muy bueno Fede, vamos a empezar a implementarlo
24 de abril de 2006
Federico
are: Hay tantos artículos del tema que era esperable que otro mencionara lo de contenido generado. Al menos yo menciono tres alternativas de contenido generado.
24 de abril de 2006
are
Ahí te doy la razón
Más bien me sorprendió el post de “Armonía” y no pude evitar el comentario. Mea culpa :S
24 de abril de 2006
Juan G. Hurtado
Hummm, sí, es muy parecida, lo cual no me extraña teniendo en cuenta que las posibilidades que hay son más bien pocas, y que “ya está todo inventado”. No pretendía haber descubierto nada, la verdad, simplemente describir una técnica.
Saludos.
26 de abril de 2006
jorge miana
Te felicito por el contenido de tu pagina. No comprendo sobre el objetivo de crear una pagina donde se mezclan links con autores y no se sugieren soluciones prácticas. Debo suponer que lo que está inserto en esta pagina es de tu autoria, producto de muchos años de investigacion o estudios.
Editado por Federico. Regla básica: jamás escribir todo en mayusculas.
2 de mayo de 2006
jorge miana
Te agradesco la aclaración sobre las reglas de tu comunidad “Dabomb”, y seguramente las generales de todo comentario o posteo en cualquier sitio.
Me resulta impractico tener que buscar un tema especifico dentro de tu web, ya que no se parte desde un punto Cero o Neutro sino que se aborda de lleno sin dibujar la idea principal de lo que se quiere o pretende conseguir en pocas palabras.
En sintesis, si el tema es “El Reemplazo de texto por Imagenes” esto deberia ilustrarse con un rapido ejemplo o grafico, de manera que para alguien que no tiene la menor idea de lo que se habla o de lo que se sugiere paresca algo simple.
A mi el titulo solo me sugiere una pagina llena de Mapas conceptuales o Imagenes, lo que en definitiva plantea el tema de el peso o la rapidez con que se cargue la pagina.
El tema de las imagenes asociadas o convertidas en lenguaje de comunicación
web requiere de mucho analisis y en definitiva puede asemejarse al uso de frases construidas con imagenes o graficos.
Considero uso de hojas de estilos o CSS, esta vinculado a este tema pero si lo que se desea es establecer una forma más dianmica de mostrar la pagina, deberiamos referirnos a un “ENGINE” o Ingenio de Codigos, empleando scripts,ajax, y colores bien complementados para potenciar el diseño de la pagina.
8 de mayo de 2006
Federico
No es comunidad Dabomb.
Escribir en minúsculas en una regla de etiqueta en Internet. Escribir todo en mayúsculas se entiende como gritar.
Sobre los temas: Mi estimado, este blog rara vez se preocupa por los novatos. No podés pretender que cada vez que hable de CSS explique en qué consiste. Además dejo en claro al principio de la anotación que, si no tienen idea sobre el tema, la anotación en Armonía es mucho más introductoría.
Sobre la relación entre el título y la temática, entiendo que puede llevar a confusión pero, dada mi capacidad, es poco lo que puedo hacer para cambiarlo. Si vamos a confusiones, vos y yo usamos la palabra “engine” con diferentes significados
8 de mayo de 2006
jorge miana
Ciertamente usamos dos lexicos distintos mas alla de si estemos acertados en su significado exacto, y de verdad es bueno que haya esta discrepancia .
Con respecto a NOVATOS, entiendo que no se puede hacer un tutorial ni volver a revizar todo un tema planteado, pero si se podria generar un nuevo tema, como lo es el de la accsesibilidad a sitios webs y nuestros deseos de un DISEÑO perfecto para los robots de:
http://www.accesible.com.ar/examinator/
que siempre encuentran imperfecciones y algunas nadie las puede solucionar si depende de un Hosting FREE .
8 de mayo de 2006
jorge miana
Reemplazo de texto por imagenes usando …
Web@x: 8.2
URL: http://511.dabomb.com.ar/2006/04/reemplazo-generado/
El informe analítico proporciona una medida de la extensión de los problemas encontrados y la naturaleza de los mismos. Cada problema o buena práctica descripta en el informe tiene asociado un pequeño texto explicativo de la importancia de cumplir con ese punto.
Segun este informe esta pagina ocupa el puesto numero 18 con calificacion de exelente y lo unico que se le critica es:
————————————–
Se usan 1 elementos para controlar la presentación de la página (por ej.: <b>).
Es incorrecto utilizar elementos del lenguaje de marcas para controlar la forma en que se presentará la página. En su reemplazo, se deben utilizar hojas de estilo.
WCAG 3.3: Use hojas de estilo para controlar la disposición y la presentación. (Prioridad 2)
Asociación de etiquetas con controles.
Hay 5 control(es) de formulario y 4 etiqueta(s) ().
El atributo “for” de cada etiqueta debe coincidir con el atributo “id” del control de formulario que identifica. Esto es especialmente útil para los usuarios que utilizan lectores de pantalla para navegar.
WCAG 12.4: Asocie etiquetas explícitamente con sus controles. (Prioridad 2)
No se utiliza el atributo “accesskey”.
Los atajos de teclado permiten, a quienes utilizan el teclado para navegar, acceder rápidamente a los elementos más importantes de la página.
WCAG 9.5: Proporcione atajos de teclado para los enlaces importantes (incluyendo los de los mapas de imagen de tipo cliente), controles de formulario y grupos de controles de formulario. (Prioridad 3)
————————————–
Pero veremos luego que si emplemamos otro Examinator los resultados seran diferentes, entonces a quien creerle sera el tema o mejor dicho donde mejorar nuestra experiencia para llegar a un nivel alto de calificaciones positivas.
8 de mayo de 2006
Federico
Cuando yo digo engine, pienso en motor de renderizado.
Con respecto a la accesibilidad como tema, este articulo habla sobre como hacer desaparecer un texto sin que represente un problema para los robots.
Eso no quita que hace rato tengo ganas de hacer un artículo sobre las deficiencias de los robots como examinator.
9 de mayo de 2006
jorgemiana
De todos los sitios que visite este es el mas rapido para responder un comentario generado, razon por la cual te felicito, y te dejo una pregunta: ¿Tienes un cyber o vivis tan conectado como yo a INTERNET?
9 de mayo de 2006
Federico
Ni tanto. Sólo me conecto desde mi casa por la noche.
9 de mayo de 2006
jorge miana
Estoy tratando de establecer cuales son las pautas para que una pagina sea correctamente validada por los robots Examinators de Accesible Com Ar
Y segun Veo solo se aceptan sintaxis perfectas segun W3C aun cuando en la practica haya ausencia de imagenes o Accesos desde el teclado para hipervinculos que funcionen bien.
He tomado como ejemplo la pagina OSIRIS PRODUCCIONES que segun el robot ocupa el tercer lugar , pero del analisis hay cosas que no puedo explicArme viendo el codigo.
Ver codigo fuent de :
http://www.osiris-producciones.com/
Y lo que no me explico es porque el robot busca primero si esta la sintaxis completa y luego si cumple con los pasos de Validacion de codigos, pero sin distinguir si una pagina esta escrita o en blanco, si tiene o no imagenes con sus atributos ALT vacios o llenos.
9 de mayo de 2006
Federico
Podrías comentarles todos esos errores a los desarrolladores. Igualmente creo que poco pueden hacer: es un robot, está todo automatizado. Es triste que haya gente que considera que ese tipo de sitios tienen la última palabra.
9 de mayo de 2006
jorgemiana
La veradera razon de que sea posible el reemplazo de textos por imagenes me hace reflexionar que es más compresible para los que buscan informacion rapida, pero no tan practico para quienes solo ven paginas desde la apariencia de las imagenes evitando la lectura de textos
30 de mayo de 2006
jorgemiana
Dice el Robot EXAMINATOR:
http://www.accesible.com.ar/examinator/
Página no aceptada
El código “E” indica que la página no permite un análisis completo y se la considera de modo especial. Este índice sólo es comparable con aquellos de igual código y la página no se incluye en el ranking general.
Hay un error de sintaxis muy básico que impide efectuar un análisis confiable: la página no contiene un elemento .
Por favor, lea el informe analítico. En este informe se detallan todos los aspectos evaluados para definir el índice Web@x y sus indicaciones son de aplicación en el desarrollo de cualquier página web.
DIGO YO:
Realmente interesante el Codigo Fuente Implementado la apariencia es optima gracias al CSS que Publico Mas abajo:
Borré todo el CSS. No sólo no es mio, sino que nada tiene que ver con el detalle que planteas. Editado por Federico
3 de junio de 2006
Federico
Borré un par de tags, entre ellos el de comienzo de
BODY. Nada importante.4 de junio de 2006
jorgemiana
Resultados del nuevo analisis que efectua el Robot examinator a tu web:
Excelente
Ocupa la 19º posición en nuestro ranking general.
La página cumple adecuadamente los principios generales del diseño accesible recomendados por las Pautas de Accesibilidad posibles de identificar automáticamente.
Ahora,Mi pregunta es como lograr que un reemplazo de texto sea valido sin uso de CSS y sea posible mediante la formula ‘p style=”">’ o dicho de otra manera definiendo que es lo que queremos que ocurra dentro de la pagina sin emplear o llamar hojas de estilos?
La razon de mi pregunta obedece a que quiero que sea valido para todos los exploradores el reemplazo que deseo hacer.
4 de junio de 2006
jorgemiana
OPERA sera mi sitio preferido ya que siempre se lo encuentra a mano cuando todo los hostings fallan, Ahora con respecto al reemplazo de textos por imagenes, hice una experiencia muy particular, (sustitui todo un area de texto por una imagen con el contenido) la imagen es pesada pero la pagina es liviana pues carece de tantos codigos, razon por la cual le puse un link externo para abrir la imagen que necesito mostrar, pero no me convence mucho hacer eso.
11 de septiembre de 2006
jorgemiana
http://sonidoswebs.8m.com/E/reemplazo.html
En esta pagina provare el codigo que mejor funciona en IE EXPLORER Y MOZILLA FIREFOX, llevandolo a su maxino potencial si la pagina lo soporta. Sera cuestion de pruevas y ensayos con muchos errores e improlijidades pero algo positivo lograre.
11 de septiembre de 2006