Mudando o background-image no hover

Postado em August 25th, 2007 | Algo sobre CSS, Geral, Tutoriais

Vamos lá. Retomando o ritmo dos tutoriais que estava um pouco lento, ai vai mais uma dica para a galera que ta começando.

Quando usamos uma imagem como background de um link, e queremos que ela mude no hover, em geral vem a idéia de usar duas imagens, algo do tipo a{background-image:url(imagem1.jpg)} e a:hover{background-image:url(imagem2.jpg)}. Ok,essa maneira não possui nada de errado, mas pode ser melhorada.

Você abre a página, e a imagem inicial é carregada, quando passar o mouse no link, a imagem do hover por ainda não ter sido carregada, não vai aparecer instantaneamente, e vai ficar sem imagem por alguns segundos.

É um tempo que pode parecer insignificante, mas que pode ser evitado com uma alteração simples. Para tal, basta fazer isso usando uma imagem só. Ao invés de usar 2 background-image distintos, usaremos um background-position.

Para facilitar o entendimento, veja a imagem abaixo. Temos um botão com 100 x 40. Para isso precisaremos de um background de 100 x 80, que seriam os 2 backgrounds distintos, mas em uma única imagem, então apenas precisaremos mudar o bg de posição. Vejamos agora o código para essa tarefa.

tamanho da imagem

a{
background:url(bg.jpg) no-repeat;
background-position:0 0;
width:100px;
height:40px;
display:block;
text-indent:-5000px;
}

a:hover{background-position:0 -40px;}

Note que a imagem tem 100×80, mas o botão terá apenas 100×40, fazendo com que só apareca a parte da imagem correspondente. Confira o resultado.

Posts Relacionados

1 Comentário para “Mudando o background-image no hover”

  1. djulian disse:
    October 3rd, 2007 at 09:02

    ja viu o que acontece no ie 6 ?

Solte o Verbo