CSS Sprites: Menu

CSS Sprites: é uma técnica muito utilizada na diminuição de requisições ao servidor.

Esta técnica é muito utilizada em menus, aonde uma única imagem agrupa as demais, possibilitando a troca de imagens no evento de passar o mouse sobre, sem ter que recarregar uma nova imagem.

Todo o processo de identificação das partes acontece através da propriedade background-position do CSS, bastando definir as posições x e y, respectivamente, horizontal e vertical.

A imagem abaixo mostra exatamente o que se trata o CSS Sprites.

Você deve criar a imagem em um programa que permita delimitar e identificar as posições em pixel.
Imagem criada no Adobe Fireworks.

Dimensões da imagem: 580 x 290px.

O primeiro passo é esconder as imagens que aparecerão somente quando o cursor estiver sobre o item do menu. Para isso, devemos definir a altura da imagem, que no nosso caso, será a metade da largura total.
Sendo assim, o valor de height será 145px.

Dica:
posição x: valor positivo: desloca a imagem a direita / valor negativo: a esquerda
posição y: valor positivo: desloca a imagem para baixo / valor negativo: para cima.

Vamos aos códigos:

<div id="menu">
   <ul class="menu">
	<li><a class="home" href="#">INÍCIO</a></li>
        <li><a class="sobre" href="#">SOBRE</a></li>
	<li><a class="fotos" href="#">FOTOS</a></li>
	<li><a class="contato" href="#">CONTATO</a></li>
   </ul>
</div>

ul.menu { 
width:580px; // largura total da imagem
}
ul.menu li { display: inline;}
 
ul.menu li a {
  display: block; 
  float: left; 
  height: 145px; // metade da largura total
  color:#FFF; 
  line-height:145px; // altura da linha - centraliza o texto na vertical
  font-size:20px;
  font-weight:bold;
  text-align:center; // centraliza o texto na horizontal
  background-image:url(../images/bgMenu.png); // imagem de fundo
}
// primeiro botão
ul.menu li a.home {width: 145px; background-position: 0 0;}
ul.menu li a.home:hover {width: 145px; background-position: 0 -145px;}
// segundo botão
ul.menu li a.sobre {width: 145px; background-position: -145px 0;}
ul.menu li a.sobre:hover {width: 145px; background-position: -145px -145px;}
// terceiro botão	
ul.menu li a.fotos {width: 145px; background-position: -290px 0;}
ul.menu li a.fotos:hover {width: 145px; background-position: -290px -145px;}
// quarto botão	
ul.menu li a.contato {width: 145px; background-position: -435px 0;}
ul.menu li a.contato:hover {width: 145px; background-position: -435px -145px;}

Como entender esta técnica:

Para pegar o primeiro botão: deve-se definir tamanho do botão (145px) e as posições de x e y (0px/0px).
ex: {width: 145px; background-position: 0 0;}

Confira a imagem abaixo:

Esta imagem mostra como obter as demais posições dos botões.

{width: 145px; background-position: -145px 0;}
{width: 145px; background-position: -290px 0;}
{width: 145px; background-position: -435px 0;}

Posicionamento das imagens quando o cursor está sobre o botão

{width: 145px; background-position: 0 -145px;}
{width: 145px; background-position: -145px -145px;}
{width: 145px; background-position: -290px -145px;}
{width: 145px; background-position: -435px -145px;}

Até +