Reemplazar texto por imágenes con CSS | Using Image replacement techniques

Existen diversos métodos para reemplazar un texto por una imagen y varias necesidades. Por ejemplo para los headers de los blogs me han preguntado varias veces cómo añadir el Logo pero que a la vez tenga el texto del tí­tulo del blog.

Bien lo que se conoce como XHTML semántico y por cuestiones de accesibilidad debemos hacer que la página tenga sentido aunque no se puedan mostrar las imágenes o los estilos, además los buscadores no pueden encontrar imágenes pero sí­ textos.

Para que convivan los dos yo utilizo el siguiente truco, le aplico un estilo al selector que lo necesite:

h3 { text-indent: -9999px}

De esta forma saco el texto de la pantalla y sólo se verá la imagen. También podemos cambiar:

visibility : hidden;

ó

display: none;

La diferencia es que en la primera el elemento sigue ocupando el espacio original y con display no.


Escribí esto el 13/01/2007

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies