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 (256x128px, 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.
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
Eis uma dica sempre útil!
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…
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
@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
Ora ai está um grande tutorial, é daquelas coisas que se usa imenso mas que quando se quer raramente se encontra como o fazer
Thank you bery nice
boa dica.
cheers!
E assim já não ficamos “uns segundos” à espera que a segunda imagem apareça, porque já foi carregada.
Boa dica!
Obrigado aos dois
Boa dica!
Já andei a pesquisar sobre isto e não tinha encontrado nada tão simples!