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:
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é +