Essa técnica é interessante pois carrega cada imagem do link de uma vez.
A imgem estática e a "hover" estão no mesmo arquivo, uma embaixo da outro. Com um tamanho fixo podemos saber onde termina uma e o começa a outra.
Exemplo:
imagem original:
Segue o código do menu:
<div id="menu">
<ul>
<li><a href="http://www.google.com.br/" id="navi1">Google</a></li>
<li><a href="http://www.yahoo.com.br/" id="navi1">Yahoo</a></li>
</ul>
</div>
Agora o CSS com explicação:
/* Menu */
#menu ul {
/*Retira a bolinha da lista*/
list-style-type: none;
}
#menu li {
/* Evita a repetição da imagem*/
background-repeat: no-repeat;
}
#menu li a {
/*Altura e largura do primeira parte da imagem*/
height: 39px;
width: 179px;
/*Estende o link para o tamanho do li*/
display: block;
/*Retira o sublinhado do link*/
text-decoration: none;
/* Aqui tem um truque, joga o texto do link para 2000 pixels a esquerda, fora da visualização. Valeu pela dica Vinicius.*/
text-indent: -2000;
}
#menu li a#navi1 {
/*Coloca a imagem no de fundo no link. CAla link deve ter uma "NaviX" para variar a imagem*/
background-image: url(img/button.jpg);
}
#menu li a:hover {
/*Está ai a mágica do efeito. Muda a posição da imagem de fundo do link para 144 pixels a cima , novamente fora do elemento(exatamente a altura da primeira parte)*/
background-position: 0px -39px;
}
Esse efeito é interessante porque mesmo sem o CSS o menu continua funcional.
