Ontem tive que fazer um botão com “Rollover Image”, se você não sabe, são aqueles botões feitos com imagens que trocam quando se passa o mouse por cima. Como o botão “sobre” no topo deste site ou o botão “assinar o feed RSS” na lateral direita.

Antes de chegar na solução, vou escrever um pouco sobre o que eu já usei, antes de conseguir este resultado.

Até um tempo atrás, eu usava um código JavaScript como este aqui:

Não fui eu que escrevi, o dreamweaver fazia por mim, quando parei de usar o DW, apenas copiei o código e guardei para usar quando precisasse. Pra dizer a verdade, eu nunca procurei saber o que esse código faz realmente, ele funcionava e pra mim era o bastante.

Mas também já tinha parado de usar isso faz um tempo, estava usando só CSS com troca de background no elemento do link, que eu mesmo desenvolvi e “achava” que funcionava, era mais ou menos isto aqui:

O que acontece no código acima:
Eu uso os seletores da tag <a>, tranformo em bloco, atribuo uma largura, altura e imagem de background. Para o efeito de troca, atribuo para a:hover uma outra imagem de background.
Para tentar fazer um preload da imagem, o que eu fazia? Antes da imagem “off” (a padrão que vai ficar na tela), eu fiz a mesma coisa porém usando a imagem “on”.

Na minha cabeça o que ia acontecer é: o navegador vai passar pelo primeiro a:link, vai carregar a imagem “on”, vai passar pelo segundo a:link e carregar a imagem “off”, assim, quando o usuário passar o mouse e acionar o a:hover, a imagem “off” já vai ter sido carregada uma vez e vai ficar tudo beleza, um preloader tabajara de primeira.

E isto até que funcionou, pelo menos eu “achava” que funcionava pois só usava imagens pequenas, hoje tive que fazer isto, mas com um botão grande e uma imagem grande também, na minha máquina eu testei e estava tudo beleza, quando subi para o servidor de homologação, o botão deu uma piscada de uns mil segundos! Ok nem tanto, mas piscou e eu logo vi, hum… deu merda.

Fiquei pensando, testando, achei várias soluções com preloader em JavaScript bem mais simples do que o código lá de cima, como este aqui por exemplo, coisa que eu consigo ler e entender o que faz, mas ainda estava achando que não era a melhor solução, tinha que dar um jeito nisso só com CSS!

Até que cheguei numa solução simples, eu não preciso carregar duas imagens e ficar trocando elas, eu posso usar uma imagem só! Sim! E então só troco ela de posição.

Simples assim:

Basicamente a mesma coisa do código anterior, mas aqui uso uma imagem só, com as duas posições lado a lado, como a imagem exemplo abaixo:

O segredo é: no primeiro seletor, posiciono a imagem em top e left, já no a:hover posiciono a imagem em top e right isto faz parecer que a imagem troca, mas na verdade apenas desliza de um lado para outro.

Repare na redução de linhas de código, na primeira solução, tem 34 linhas, está certo que tem um pouco de html ali, então digamos 30 linhas, na segunda opção 17 e na terceira, bem mais simples e de fácil manutenção, 13 linhas, além do que usamos apenas uma imagem, menos arquivos se você tiver vários botões assim na aplicação.