Image Replacement o cómo reemplazar contenido por imagen

25/sep/2006 36

Con este artículo atacaremos directamente la semántica para mejorar la gráfica de nuestro sitio. O sea, no la atacaremos, trabajaremos en conjunto con ella. Si, así queda mejor. La idea de esto, es (en este caso) reemplazar el tag H1 (pueden ser otros, tienes hasta el H6) que sería el título de nuestro sitio (eso es un H1, el título más importante. Así lo entiende Google) por una imagen más atractiva, que destaque más nuestro sitio y que no pierda la importancia o significado del H1. Además de eso, no dejaremos de lado el texto que sería la descripción del H1, así los buscadores sabrán:

1. Es un titulo importante.
2. El nombre de este título es el que está escrito ahi.

El punto es que el nombre del H1 estará escondido, y será reemplazado por la imagen más bonita que cada uno diseñará para su sitio. Comencemos:

El código HTML es muy simple y conocido por todos:

<h1>CSSLab – otro laboratorio de ideas, pero en español.</h1>

Y la imagen que utilizaremos para reemplazar ese texto es la siguiente:

Bien, lo que haremos serán principalmente 2 cosas: primero, le daremos ancho, alto y un background-image (con por supuesto nuestra composición) linkeando adonde esté nuestra imagen. Luego, esconderemos el texto que contiene H1, dándole text-indent de -9999px (text-indent mueve nuestro texto, en este caso negativo llevándolo más allá de nuestros márgenes) y luego escondiéndolo con overflow: hidden; (esto esconde cualquier elemento que no está suscrito dentro de nuestros márgenes, evitando un scrollbar horizontal gigante). Sigue el código CSS:

h1 {
background-image: url(header_csslab.gif);
background-repeat: no-repeat;
text-indent: -9999px;
width: 500px;
height: 130px;
overflow: hidden;
}

Ver ejemplo final

Bastante simple, no? Embellecemos nuestro sitio y aún así lo hacemos relevante para los buscadores.

Comentarios

  1. aguayoki [#]

    ¿Y no es mejor aplicar display: none; al elemento?

    Al menos así lo hago yo… Es compatible con todos los navegadores, y degrada perfecto al quitar las hojas de estilo. Especial para las arañas de búsqueda.

    Saludos!

  2. CSSLab Admin [#]

    si, tb es válido, pero oculta toda la información, inclusive la imagen misma. la idea es q solo el titulo del elemento este oculto, y este sea reemplazado por una imagen como la q compuse.

  3. morris [#]

    muy buen tutorial, no me sabia esa del overflow, lo voy a aplicar, porque con IE uno nunca sabe.. espero que escribas posts mas seguido, muy buen blog. saludos desde Mexico

  4. josé luis báez [#]

    y justo que buscaba reemplazar el título de una página con una imagen y no podía hacerlo. de cajón. muchas gracias

  5. seba [#]

    bueno bueno bueno!

  6. Bane [#]

    Un metodo para lo mismo pero por ejemplo multiples titulos es usar lo siguiente:

    titulo
    titulo 2

    Luego en el CSS le das al span propiedad none, o sea span { display: none;} y al h3 especifico la imagen que quieres que reemplace el texto.

    En todo caso muy güeno este sitio. Felicitaciones

  7. luis [#]

    ¿¿ es posible poner la etiqueta alt en la imagen ??

  8. CSSLab Admin [#]

    una etiqueta alt no va a poder verse ya que la imagen estará como background.

  9. Alvaro Farfan [#]

    Antes que todo, debo decir que es agradable encontrar muy buen contenido chileno, que hable de desarrollo web… al igual que “Estado Beta”, siempre resulta escencial pasearse por aquí…

    Ahora bien, al reemplazo de contenido por una imagen, lo que yo utilizo es “display: none;” para el elemento que quiero “ocultar”… otro metodo igualmente efectivo…

    HTML:

    Título

    ———————————————

    CSS:

    #header{

    background: url(LaImagen.png) center top no-repeat;
    height: 130px;
    }

    #header h1{
    display: none;
    }

  10. CSSLab Admin [#]

    Alvaro, gracias por tu comentario. existen en realidad varios métodos para resolver este mismo tema, el q mencionas es el llamado Fahrner, ya q estas utilizando 2 tags para realizar el ocultamiento del texto. El método q uso yo, y es el q publiqué, se denomina Phark y para mí ha sido el más efectivo. Cosa de gustos. Saludos!

  11. Mario [#]

    No conviene usar display: none; porque algunos lectores de pantalla hacen caso y lo omiten.

  12. Bernardo [#]

    Cómo hago para sustituir un link <a> por una imagen y que IE lo interprete correctamente?, básicamente he probado lo mismo que tu y firefox me lo reconoce bien, pero en IE se ve la imagen de fondo pero no responde como un link al haber movido el texto fuera del área visible.
    Un saludo y muchas gracias.

  13. CSSLab Admin [#]

    bernardo, puedes publicar tu codigo en los foros? generalmente no he tenido problemas con esto en IE,, menos con links… asi podria ayudarte mas facilmente, sin adivinar. salu2

  14. Bernardo [#]

    Resuelto!!, el problema era que no estaba aplicando los atributos para el cambio de imagen por texto a la etiqueta <a> sino a la que la contiene dentro del código html, y como el firefox lo reconocía y hacía lo que yo quería, creía que se trataba de un error del IE (que es lo que pensamos siempre primero, debido a que los chicos de bill gates se han pasado los standars css por el forro). Para la próxima investigaré más antes de colgar dudas en la webe, y en caso necesario, publicaré el código en discordia. Gracias de todos modos y felicitaciones por tu webe, que me está siendo de inestimable ayuda. Sigue así!!!!

  15. CSSLab Admin [#]

    como dato, IE6 no soporta las pseudo-classes en tags q no sean links. a:hover, a:active…… por ej. podrias haber usado li:hover q en FF si funciona pero no en IE6. q bueno q pusdiste solucionarlo . salu2

  16. Andros [#]

    Muy Interesante.
    Se podria hacer para un .swf?
    Seria una buena manera de no perder posicionamiento en una web hecha enteramente en Flash no?

  17. CSSLab Admin [#]

    Andros, no funciona este metodo para SWF ya q no los puedes cargar como fondo de imagen.

  18. Andros [#]

    Ya.
    Lo pensé mientras apretaba en enviar.
    Me dejé llevar por el enfasis.
    😛

  19. SEO para desarrolladores y programadores | Alex Mozo [#]

    […] Si los enlaces son con imágenes usa técnicas de reemplazo para mejorar la accesibilidad y la semántica, más info en http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/ […]

  20. Luis [#]

    No sé si existe la solución perfecta que sea semántica y accesible a la vez.
    La que yo propongo tampoco es perfecta. ¿Qué les parece?

    CSS:

    div {
    text-indent: -9999px;
    margin-bottom: -1em;
    }

    XHTML:

    CSSLab – Otro laboratorio de ideas, pero en español

  21. Luis [#]

    Vuelvo a enviar el comentario anterior, que no ha salido completo:

    No sé si existe la solución perfecta que sea semántica y accesible a la vez.
    La que yo propongo tampoco es perfecta. ¿Qué les parece?

    CSS:

    div {
    text-indent: -9999px;
    margin-bottom: -1em;
    }

    XHTML:

    CSSLab – Otro laboratorio de ideas, pero en español

  22. francisco arenas [#]

    yo normalmente lo que hago es crear un texto en un span utilizando la clase accesibility:

    .accesibility {
    display:none;
    }

    el h1 quedaría así: el gran titulo

  23. » Pronto… | CSSLab [#]

    […] Image Replacement o cómo reemplazar contenido por imagen […]

  24. CSSLab » Más tipografías con sIFR [#]

    […] Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para las sans-serif (palo seco); Georgia, Times/Times New Roman para las serif y Courier/Courier New para monospace. Y sería, tenemos limitada la creatividad con eso. Si pensamos en utilizar una font especial, lo único que tenemos es recortarla como un GIF y ponerlas con alguna técnica de text-replacement. […]

  25. Esteban [#]

    Y enfocandome en SEO/Robots, me imagino que el robot al leer la etiqueta h1 pero con texto oculto (overflow: hidden;), no sera una forma de penalizar el sitio para sus resultados en google?

    Que opinas Admin?

  26. Jorge Epuñan [#]

    Esteban: la tecnica es muy limpia ya q usa text-indent para esconder el elemento, overflow: hidden cumple solo la funcion de no desplegar un scroll horizontal al elemento. asi q para el robot, el txt aun esta ahi pero corrido ‘levemente’ 9999px hacia la izquierda, no hay cambio de contenido donde los robots si pueden penalizrte (por ejemplo con visibility: hidden).

  27. Julien [#]

    perdón, no entiendo bien…
    ¿overflow:hidden esta o no penalizado por google si esta aplicado a un bloque conteniendo texto?
    No se porque pregunto ya que comprobe que si..
    ¿y visibility:hidden?

  28. rené [#]

    excelente blog¡¡

    quiero hacer lo mismo pero para un menu con comportamiento de roll over..alguna técnica o tuto que me recomienden?

  29. Jorge Epuñan [#]

    Julien: la verdad tu duda me intrigó y tras leer bastante, encuentro respuestas contradictorias y poco claras (es normal dado q los buscadores tampoco son muy transparentes con sus tecnicas de indexacion y rankeado). Dicen algunos q no hay problemas de usar tecnicas como text-indent junto a overflow:hidden en archivos CSS linkeados externos, ya q los spiders no llegan a ellos tan frecuentemente; por otro lado Google indica q algunas tecnicas son penalizadas pero no especifica cuales ni como aplica ese criterio; enfin lo q presento en este articulo esta probado y utilizado por muchos desde hace mucho y no ha tenido problemas tales.

    Exito.

  30. Jorge Epuñan [#]

    rené: podrías facilmente implementarlo con un menu horizontal con rollover. saludos.

  31. Miguel Flores [#]

    Yo suelo utilizar el siguiente HTML:
    Titular con reemplazo de imagen

    Y el CSS:
    h2#ejemplo span{
    display: none;
    }
    h2#ejemplo {
    height: 35px;
    background:url(../images/titular.jpg) no-repeat;
    background-repeat: no-repeat;
    }

    Es accesible y es estándard.

  32. Miguel Flores [#]

    Yo suelo utilizar el siguiente HTML:
    h2 id=”ejemplo”>Titular con reemplazo de imagen</h2

    (Lo puse así por que de otro lado no me muestra el código)
    Y el CSS:
    h2#ejemplo span{
    display: none;
    }
    h2#ejemplo {
    height: 35px;
    background:url(../images/titular.jpg) no-repeat;
    background-repeat: no-repeat;
    }

    Es accesible y es estándard.

  33. Pablo Cabrol [#]

    es posible realizar el reemplazo de un enlace , y a lo que me refiero es que se pueda ocultar, por ejemplo por indentacion en elnace con un margen negativo, yo he realizado siempre el reemplazo pero siempre tengo que aplicar esta propiedad a un encabezado dentro del mismo enlace, a los enlaces puedo cambiarles el fondo peor no asi hacer que el texto desaparezca, es posible o sigo aplcando

  34. Estilos de botones crossbrowser ↝ CSSLab [#]

    […] radica en agregar el texto del botón en la misma imagen de fondo, y através del método Phark, ocultar el título del […]

  35. Modernizando los drop caps ↝ CSSLab [#]

    […] más bonito, reemplazando la letra en sí por una imagen que crearemos y aplicando la técnica de image replacement que más les acomode. Eso sí, en este caso no podemos utilizar :first-letter ya que no […]

  36. Etiquetas de título en HTML5 | CSSLab | Laboratorio de ideas web [#]

    […] marca del sitio para colocar el nombre del sitio envuelto en ese <h1> con alguna técnica de image-replacement del […]

Deja tu Comentario

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

CSSLab