Reemplazo de imágenes con CSS

Vía Diseñorama me entero de que hay una nueva técnica para sustituir texto en una página web por imágenes (y así poder disponer de más opciones de diseño. Se trata de Malarkey Image Replacement (o MIR). Se trata de una técnica que usa CSS para esconder el texto en la página y pone la imagen como una imagen de fondo. Por ello, es ‘familia’ de Fahrner Image Replacement (FIR), Leahy/Langridge Image Replacement (LIR) y el Phark Method. FIR mete el texto a sustituir en un span (cosa que no queda demasiado semántica) y usa display:none (cosa que se atraganta a algunos lectores de pantalla). Con LIR te ahorras el span y se usa un padding para apartar el texto (lo que implica usar el Box Model Hack para que las cosas funcionen con Explorer 5 para Windows. Y con Phark la forma de ocultar el texto es colocarle un text-indent negativo enorme. Hasta ahora Phark era el método ‘más limpio’, pero da problemas con Explorer 5 para Windows, cosa que no pasa con MIR, que usa un letter-spacing negativo para cargarse el texto. Eso sí, los cuatro métodos fallan si en el navegador está activado el CSS pero las imágenes no.

En el propio Diseñorama hay un artículo (del 1 de marzo, y que, por tanto, no incluye a MIR) que compara los diferentes métodos de reemplazo de texto, tanto los tres ya mencionados como otros que usan JavaScript, Flash o soluciones de scripting en el servidor.

2 opiniones en “Reemplazo de imágenes con CSS”

  1. Cual es la ventaja de utilizar estos metodos en vez de poner una imagen directamente… la posibilidad de cambiarla editando la hoja de estilos?

  2. Es (o debera), sobre todo, una cuestin de accesibilidad: el texto sigue estando ah. Por tanto, un lector de pantalla sabr que dice. De paso, tambin sabra qu dice Google (cosa que va bastante bien para los navegadores), y se podr leer con navegadores ‘slo texto’, por ejemplo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.