Essa é mais uma propriedade css extremamente útil, mas às vezes pouco utilizada, pelo fato de que muitas pessoas desconhecem seu funcionamento. Desenvolvendo a nova versão site da Câmara de Vereadores de Rio do Sul, precisei fazer algumas imagens cambiáveis. Para isso, me utilizei da seguinte técnica:
Criei uma imagem única contendo as duas imagens que deveriam ser mostradas, a normal e para quando o mouse estivesse sobre. Mais ou menos assim
Para este item criei uma classe no arquivo css assim:
#lateral #icones ul li.minuto a {
background: url(../img/minuto.png) top left no-repeat;
}
#lateral #icones ul li.minuto a:hover {
background-position: bottom left;
}
A primeira define a imagem do fundo, e a segunda, o comportamento quando o mouse estiver sobre o link. No caso, o alinhamento padrão da imagem é top, como mostrado na primeira, e bottom quando o mouse está sobre o link, como mostra a segunda.
A principal vantagem desse método é o fato de apenas uma imagem ser carregada, o que faz com que o link funcione corretamente já na primeira vez. A desvantagem, é o fato de que se a imagem for muito grande, ela demorará mais para ser carregada.
