Micaela 18 de agosto de 2008 a las 09.00
   Imprimir artículo
elWebmaster.com

Una única imagen (sprite) para todo un menú interactivo en CSS


Si uno desea crear un menú con varios botones que cambien su imagen al pasar el mouse por encima, normalmente crea varias imágenes, dos por cada estado de cada botón. Esto ralentiza el sitio y genera muchas peticiones al servidor (HTTP Requests).

Sabías que Google, por ejemplo, extrae todas las imágenes de su sitio de un único archivo? Esto es posible gracias a los sprites, una especie de grilla de imágenes que nació con los videojuegos. Conoce cómo aplicar sprites en tu sitio para ganar velocidad de descarga, espacio y peticiones en el servidor y mucho más.

Usando Sprites con CSS en tu sitio web

¿Qué es un sprite exactamente?

Los Sprites nacieron con los viejos videojuegos como los de Nintendo. Como había que ahorrar memoria, en vez de usar muchas imágenes por cada movimiento o personaje del juego, se cargaba una única vez una grilla compuesta por todas las imágenes y luego, mediante el programa, se llamaba a cada sector de la grilla por separado.

Las ventajas de esto son muchas, pero todas tienen que ver con ganar velocidad y ahorrar memoria. Los Sprites se cargan una sóla vez, se ahorra peso porque varias imágenes pequeñas ocupan más que una sóla conformada por ellas, se evita repetir los datos incrustados en cada archivo (ej: la cabecera de un png será igual en cada archivo separado, bien se puede unificar en un único elemento), etc.

Imagina la cantidad de peticiones que realiza el sitio de Google a su servidor. Google utiliza un sólo sprite para todas las imágenes de su sitio. Fíjate:

¿Increíble, no? Pero tú también puedes usar esto en tu sitio, gracias a CSS:

Generando un sprite para tu sitio

Primero que nada debes crear una barra para tu menú. Como ejemplo puedes ver esta:

Luego de tenerla terminada guárdala como nav.jpg y crea una copia con los cambios que deseas para cuando el mouse pase por encima. Por ejemplo:

El siguiente paso es unir ambas imágenes debiendo estar nav.jpg arriba y su copia debajo. Es importante que estén bien alineadas y posean el mismo tamaño ambas.  El resultado debería verse similar a esto:

Y con esta única imagen ya podremos realizar todo el menú. Ahora lo que queda es aplicar el código.

El CSS

Primero debemos crear una lista con HTML siendo cada elemento de esta una de las secciones de la imagen. En nuestro ejemplo seria así:

<ul id=”nav-example”>
<li id=”nav-example-01″><a href=”#”><span>Blog</span></a></li>
<li id=”nav-example-02″><a href=”#”><span>Portfolio</span></a></li>
<li id=”nav-example-03″><a href=”#”><span>Resume</span></a></li>
<li id=”nav-example-04″><a href=”#”><span>Contact</span></a></li>
</ul>

El span con texto dentro de él es tan sólo para que los buscadores puedan leerlo y tenerlo en cuenta a la hora de listar tu sitio. Obviamente debes cambiar el # dentro de la etiqueta <a> por la dirección web a la que ese botón hace referencia.

Por último utilizaremos el siguiente código CSS:

#nav-example {
background:url(”nav.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}

En esta regla debes cambiar nav.jpg por la ruta donde se encuentra tu imagen. Y ajustar el ancho y la altura según tu imagen. La altura debe ser la del archivo nav.jpg original, no el que contiene las dos barras.

#nav-example span {
display: none;
}

#nav-example li, #nav-example a {
height:40px;
display:block;
}

Aquí también debes colocar la altura igual a la que utilizaste antes:

#nav-example li {
float:left;
list-style:none;
display:inline;
}

#nav-example-01 {
width: 98px;
}

Aquí se ajusta el ancho del primero de los botones, en nuestro ejemplo el ancho de Blog es de 98 píxeles. Lo mismo se debe realizar con los siguientes tres. Si esto no lo tienes bien calculado desde antes puedes jugar un poco hasta encontrar los tamaños que más te gusten.

#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}
#nav-example-01 a:hover {background:url(”nav.jpg”) 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url(”nav jpg”) -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url(”nav.jpg”) -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url(”nav.jpg”) -352px -40px no-repeat; }

En estas cuatro líneas debes ajustar los dos números que se encuentran en cada una de las mismas  El segundo es muy simple, se trata de nuevo de la misma altura que ya hemos ajustado antes. Sin embargo el primero es un poco más complicado. Se obtiene de la suma de todos los anchos de los botones anteriores.
Así al no haber nada antes del primero irá 0px, en el segundo obviamente irá el ancho del primero ya que es el único anterior, luego 229 es 98 más 131 y 352 es 229 más 123.

Luego de esto ya habremos terminado. El trabajo puede ser muy engorroso la primera vez, pero luego de hacerlo una vez descubrirás que es bastante fácil y como ya dije antes tiene grandes ventajas.

Fuente: Style Meltdown


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (11)

  1. ricardo avalos dice:

    Gran articulo felicitaciones, aunque es imperdonable que en la linea en donde dice: “Primero que nada debes crear una barra para tu menú. Como ejemplo puedes ver esta: ” , no haya ninguna imagen.

    La comprension de la tecnica expuesta se basa primordialmente en que podamos la imagen a confeccionar, y si no hay ninguna, el articulo por muy bueno que sea no sirve de mucho :(

    Que lastima pues el tema me habia interesado, pero como dije sin la imagen que me oriente a como tengo que diseñarla su utilidad se vuelve cero

  2. Juan Manuel dice:

    ¡Hola, Ricardo!

    ¡Chequea tu conexión o tu navegador, pues las imágenes están en su lugar! jejeje…

    Además me parece que no es para decir que “es imperdonable” jajaja ^_^.

    ¡Saludos!

  3. Danniels Castillo dice:

    Felicitaciones por esta Lección de Sprite de verdad esta muy interesante
    y yo ya estoy probando con esto…
    solo que tengo un problema:
    Nose exactamente en donde debe ir el codigo en la estructura de mi HTML o sea
    en el o en el …
    Será que puede explicarme esto mas a detalle por favor…Te lo agradeceria…
    Saludos…

  4. Danniels Castillo dice:

    Perdon me refiero entre el “body” o en el “head” o en que parte….
    gracias…

  5. Juan Manuel dice:

    ¡Hola, Danniels!

    El código va en el archivo .css.

    ¡Saludos!

  6. DHA+O dice:

    gracias men¡ estubo muy padre tu tutorial, pero si te faltaron algunas imagenes de referencia, y comentar a detalle lo que hace tu codigo , por que unas cosas no las entendi , pero de todos modos muchisimas gracias ahora por lo menos tengo una referencia de como crear mi menu

  7. DHA+O dice:

    ¡¡¡¡¡¡¡NO ME FUNCIONO HICE TODO LO QUE DICE TU TUTORIAL!!!!!
    -ya tengo mi imagen.
    -ya puse el codigo en HTML y en CSS.
    -Modifique la altura y el ancho de acuerdo a mi imagen pero sigue sin funcionar.
    -solo aparece de fondo la imagen que cree

  8. DHA+O dice:

    ——————————Este es el codigo HTML——————————–

    HOME
    PRACTICAS
    RESOURCES
    OTHERS

    ——————————————–Este el codigo CSS——————————–
    #mimenu {
    background: url(../imagenes/menu.png) no-repeat;
    width:877 px;
    height:39px;
    margin:0;
    padding:0;
    }

    #mimenu span {
    display: none;
    }
    #mimenu li, #mimenu a {
    height:39px;
    display:block;
    }

    #mimenu li {
    float:left;
    list-style:none;
    display:inline;
    }
    #link1 {
    width: 220 px;
    }
    #link2 {
    width: 220 px;
    }
    #link3 {
    width: 220 px;
    }
    #link4 {
    width: 217 px;
    }

    #link1 a:hover {background:url(../imagenes/menu.png) 0px -39px no-repeat; }
    #link2 a:hover {background:url(../imagenes/menu.png) -220px -39px no-repeat; }
    #link3 a:hover {background:url(../imagenes/menu.png) -440px -39px no-repeat; }
    #link4 a:hover {background:url(../imagenes/menu.png) -660px -39px no-repeat; }

    SO, WHAT´S UP MEN ?
    HELPME PLEASE.

  9. Juan Manuel dice:

    @DHA+O

    Así en principio es difícil determinar la causa del problema, se me ocurren muchas razones (descontando que estés testeando en IE6 una imagen PNG con transparencias, je). Te propongo que nos envíes un archivo zip con tu HTML y el CSS a info@elwebmaster.com para poder analizarlo, corregirlo y darte una respuesta correcta 😉

    Un saludo, esperamos tu rta!

  10. Mr. Raymon dice:

    Yo tengo un menu hecho como una unica imagen y me gustaria que fuera desplegable ¿hay algun tutorial asi en la pagina? ¿es dificil?

    Saludos y Gracias por esta pagina que lo merece 😉

  11. Gabriela dice:

    Hola! Disculpá la molestia y que reviva un post tan viejo…pero necesito un menú asi y no me sale :S
    Usé exactamente lo que pusiste acá xq con mis imagenes no salía pero de todos modos no sale, espero puedas ayudarme. El blog es http://filidos.blogspot.com/ Saludos!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder