my name is Crysfel Villa

Runner & Software Developer

Hi there ! My name is Crysfel, I'm a Software Developer with more than 7+ years of experience, when I'm not coding with JavaScript, Ext JS or Sencha Touch, I'm probably writing a tutorial, playing my guitar or running outside.

Phone : +1 571 426 9183 Mail : crysfel@bleext.com

Image Replacement

Image Replacement

Hoy toca hablar de css ;-) , y quiero tratar el tema del remplazo de imágenes, pero, ¿Qué es esto? ¿En que nos beneficia? primeramente es bueno definir y explicar el concepto en forma general, después hablaré de las técnicas mayormente utilizadas.

Una vez escrito tu documento XHTML, semánticamente correcto, viene el siguiente paso, el cual es maquetar el sitio, o en otras palabras ponerle el diseño, para esto te auxilias en la técnica de remplazo de imágenes para cambiar un texto por una imagen, permitiendo accesibilidad a un mayor grupo de visitantes.

A continuación voy a mostrar diferentes métodos para aplicar esta técnica de remplazo de imágenes, pero antes tengo que mencionar que el remplazo de imágenes permite tener una buena accesibilidad a los usuarios, como a los buscadores, y he aquí lo interesante, que al tener accesible tu sitio, a los buscadores les agrada y ten por seguro que indexarán tu sitio rápidamente.

Classic FIR
Esta técnica fue propuesta por Doug Bowman’s , la cual consiste en agregar la etiqueta <span> al texto, para después ocultarla. Es una técnica muy sencilla, pero no es recomendada, pues si el usuario tiene deshabilitado el uso de imágenes y css activado, simplemente no verá nada. El código para esta técnica es el siguiente.

/* css */
#header {
width: 329px;
height: 25px;
background-image: url(remplazo.jpg);
}
#header span {
display: none;
}

Single-pixel <img> Replacement
Método propuesto por Radu Darvas, muy semejante a la anterior, resuelve el problema de la anterior agregando al XHTML la imagen con su parámetro de texto alternativo, su problema o inconveniente es el hecho de agregar un elemento extra al código y complica el mantenimiento del sitio. El código es el siguiente.

/* css */
#header {
width: 329px;
height: 25px;
background-image: url(remplazo.jpg);
}
#header span {
display: none;
}

Radu Method
Propuesto por el mismo autor del método anterior, consiste en agregar un margen al texto fuera de la vista del usuario y poner en el fondo la imagen correspondiente, no agrega etiquetas extras al código fuente, el inconveniente o problema es el mismo que el primer método señalado, y se presenta cuando el usuario tiene desactivadas las imágenes y css activado. El código es el siguiente.

/* css */
#header {
background: url(remplazo.jpg) no-repeat top right;
width: 2329px;
height: 25px;
margin: 0 0 0 -2000px;
}

Leahy/Langridge Method
Método propuesto por Seamus Leahy y Stuart Langridge, consta de poner el alto en cero, especificarle al padding superior el alto de la imagen a remplazar, y asignarle la imagen de fondo, con este método no se necesita una etiqueta extra span, pero su inconveniente al igual que los anteriores no funciona correctamente cuando el usuario tiene la imágenes desactivadas y css activado.

/* css */
#header {
text-indent: -100em;
overflow: hidden;
background: url(remplazo.jpg);
height: 25px;
}

Phark Revisited
Este método es muy usado en la red, y consta de indentar el texto fuera de la vista del usuario y poner la imagen en el fondo. Su problema es el mismo que los anteriores, no muestra nada cuando el usuario tiene desactivadas las imagenes y activado el css.

/* css */
#header {
text-indent: -9999px;
background: url(remplazo.jpg);
height: 25px;
}

Gilder/Levin Method
Tom Gilder y Levin Alexander, Consiste en agregar un span seguido del texto, luego haces relativa la caja contenedora y absoluto el span, posicionas el span en las coordenadas 0,0; le asignas la imagen y ocultará el texto, esto soluciona el problema cuando el usuario tiene desactivadas las imagenes y activado el css, su inconveniente es cuando la imagen es transparente, el texto no se oculta.

/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(remplazo.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

Pues bien, he mencionado algunas de las técnicas mas populares para el remplazo de imagenes, espero que sea de utilidad este artículo, y cualquier duda o comentario será bien recibido, Hasta la próxima.

Comments

One thought on “Image Replacement”

  1. Poiesis says:

    Me gustaria que por favor revisaras mi página y me hicieras recomendaciones. Soy neófita en computación y quisiera agregar una foto a la izquierda del título y descripción del Header, entre otras mejoras visuales. Gracias por tu tiempo…

Leave a comment

Contact Information

Location :
Brooklyn Heights, NY, USA.

Email : crysfel@bleext.com
Web : www.bleext.com
Tel : +1 571 426 9183

Work hours :
Monday to Friday
From 9:00AM to 6:00PM EST