Image Replacement o cómo reemplazar contenido por imagen

25/Sep/2006 263

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. stromectolforte.com [#]

    stromectol 3mg tablets buy online https://stromectolforte.com/# ivermectin satД±n al stromectol australia

  2. stromectolforte.com [#]

    stromecВ­tol where to buy http://stromectolforte.com/ stromectol ivermectin for humans

  3. prednisolonefordogs [#]

    what is prednisolone side effects of prednisolone

  4. GazInvake [#]

    buy generic cialis no prescription

  5. provigilsideeffects [#]

    modafinil provigil https://modafinilltop.com/

  6. bactrim ds dosage [#]

    bactrim coverage trimoxazole pronounce

  7. proair albuterol inhaler [#]

    institute of medicine http://albuterolotc.com – ventolin

  8. stromectolforte.com [#]

    cost of ivermectin pill https://stromectolforte.com/# stromectol 3 mg dosagem de comprimido de ivermectina 3 mg

  9. modafinil100mg [#]

    modafinil india provigil 100mg

  10. prednisoneforsale [#]

    prednisone for cats prednisone steroid

  11. bactrim ds side effects [#]

    trimethoprim polymyxin eye drops What dose of co- trimoxazole is used in a patient with a UTI?

  12. StevescorK [#]

    buy viagra on line in brisbane online viagra in australia – generic viagra supplier india
    buy viagra with paypal uk

  13. tadalafil 5 mg [#]

    generic tadalafil

CSSLab