A forma mais comum usando CSS é substituir a imagem de fundo, mas isso tem alguns inconvenientes.
Substituindo a imagem, alem de ter que gerar mais arquivos de imagem, pode ocorrer uma demora para a imagem aparecer, para contornar esse efeito indesejado, é preciso fazer o pré-carregamento da imagem usando Javascript.
Tentarei demonstrar uma tecnica muito utilizada por grandes sites, como flickr, panoramio, orkut, etc.
É a tecnica do CSS Sprite, que consiste em utilizar uma único arquivo contendo várias imagem, e modificando a propriedade background-position exibiremos a imagem desejada.
A propriedade background-position é usada dessa forma
background-position: x y;
onde x é o deslocamento horizontal
e y é o deslocamento vertical
O ponto de referencia é o canto superior esquerdo da imagem, sendo que quando
estamos utilizando o deslocamento vertical o valor é negativo.
Para essa receita de bolo precisaremos de uma imagem pra exemplificar, usaremos essa, que será
nosso botão:
Repare que uma única imagem teremos 3 botões diferentes:
O próximo passo é definir a distancia do topo de cada boatão ate o topo da imagem:
Agora que temos as medidas, vamos criar as classes CSS, sendo que o atributo-chave para o CSS sprite é o background-position
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>CSS Sprite</title>
<style type="text/css">
a:link,a:visited{
display:block;
width:120px;
background-image:url("botao.gif");
height:38px;
background-repeat:no-repeat;
text-align:center;
padding-top:5px;
text-decoration:none;
color:black;
}
a:hover{
background-position:0 -45px;
}
a:active{
background-position:0 -89px;
}
</style>
</head>
<body>
<a href="#">botao</a>
<a href="#">botao</a>
<a href="#">botao</a>
<a href="#">botao</a>
<a href="#">botao</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>CSS Sprite</title>
<style type="text/css">
a:link,a:visited{
display:block;
width:120px;
background-image:url("botao.gif");
height:38px;
background-repeat:no-repeat;
text-align:center;
padding-top:5px;
text-decoration:none;
color:black;
}
a:hover{
background-position:0 -45px;
}
a:active{
background-position:0 -89px;
}
</style>
</head>
<body>
<a href="#">botao</a>
<a href="#">botao</a>
<a href="#">botao</a>
<a href="#">botao</a>
<a href="#">botao</a>
</body>
</html>
A pseudo-classe :hover e :active reposicionam a imagem de fundo para suas respectivas coordenadas, dando o efeito de troca de imagem.
Essa tecnica tem como principal vantagem de não haver necessidade de fazer o pré-carregamento das imagens que compõem o efeito
