Image hover - css trick
Hoje em dia recorre-se muitas vezes ao truque visual “image rollover”, para, por exemplo, definir um link. O que se faz normalmente é utilizar uma imagem para o estado normal, e outra para o “mouse hover”, de modo a criar um efeito visual bastante agradável.
Isto implica usar duas imagens, o que vai sobrecarregando o web site, e se forem utilizadas muitas vezes pode tornar o carregamento do site um pesadelo, pelo menos para o pessoal dos modems e afins.
Recorrendo a uma técnica muito simples de css podemos alcançar o mesmo efeito, mas usando uma só imagem, o que implica reduzir para cerca de metade o download da imagem.
Usemos, por exemplo, esta imagem:
Como podem ver, é só juntar na mesma imagem o estado simples e a que querem que apareça quando passarem o ponteiro por cima (neste caso, o modo simples será a preto e branco e o “hover” a cores).
Agora, tendo em conta o tamanho da imagem (256×128px, neste caso), é só usar o seguinte código css para invocar o link com a imagem:
- a#gimpimg{
width: 128px;
height: 128px;
background-image: url(http://ruimoura.net/imagem/gimp_imghover.png);
display: block;
text-decoration: none;
}a#gimpimg:hover {
background-position: 128px 0;
}
Resultado final:
Deste modo, a imagem é logo carregada na sua totalidade, reduzindo o tempo de espera e a carga para o servidor e para o visitante do site.
Cheers.
11 Comments