RUIMOURA.NET FREE, AS IN FREEDOM OF CHOICE

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:
Gimp

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:

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

Boas,

Como é isso de “juntar na mesma imagem o estado simples e a que querem que apareça quando passarem o ponteiro por cima” ?

Cheers,
Mário Gamito

Posted by Mário Gamito on 16 October 2006 @ 1pm

Eis uma dica sempre útil!

Posted by RedTuxer on 16 October 2006 @ 2pm

bonito.

agradecido pela dica. o css eh uma coisa a q devia dedicar mais algum tempo, nao percebo puto, mas nunca me parece que vah fazer grande uso na minha vida cada vez menos guique.

se todos os exemplos fossem assim simples, a coisa ateh podia lah ir…

Posted by maique on 16 October 2006 @ 2pm

Mário:

Então, invés de teres uma imagem para cada estado, crias uma com os dois efeitos lado a lado.
Depois simplesmente moves a posição mais para a esquerda/direita consoante a acção.

Até acho que compliquei a simples descrição do Rui.

Btw Rui: Boa dica ;)

Posted by Cláudio Franco on 16 October 2006 @ 2pm

@Gamito: peço desculpa, mas eu sou bastante nabo a explicar as coisas aos outros.

As duas imagens que normalmente se utilizam, a que aparece inicialmente, e a que aparece quando passas o ponteiro do rato por cima, se juntam numa só imagem, como a do exemplo acima(a primeira imagem). É só mesmo juntar as duas numa só, lado a lado, e depois no css jogar com os tamanhos.

Neste caso é indicado no css que quando passas o ponteiro por cima da imagem a preto e branco ela se transforme na imagem a cores. Tem a ver com a margem definida no css, que está a dizer que com o mousehover a imagem se desvie 128px para a direita, passando assim amostrar a parte a cores e escondendo a parte a preto e branco.

Espero que tenha sido mais claro ;)

@maique ,redtuxer e cláudio: obrigado pelos elogios, mas não fui eu que inventei isto, atenção ;)

Posted by Boss on 16 October 2006 @ 2pm

Ora ai está um grande tutorial, é daquelas coisas que se usa imenso mas que quando se quer raramente se encontra como o fazer :)

Posted by dextro on 16 October 2006 @ 9pm

Thank you bery nice

Posted by Boss on 16 October 2006 @ 9pm

boa dica.
cheers!

Posted by hav0x on 16 October 2006 @ 10pm

E assim já não ficamos “uns segundos” à espera que a segunda imagem apareça, porque já foi carregada.

Boa dica!

Posted by José Carlos on 16 October 2006 @ 11pm

Obrigado aos dois ;)

Posted by Boss on 16 October 2006 @ 11pm

Boa dica!

Já andei a pesquisar sobre isto e não tinha encontrado nada tão simples!

Posted by Pedro Oliveira on 17 October 2006 @ 4am