Pessoal

Mostro meu website pessoal para vocês possam dar uma olhada.

www.mmpietro.com.br

Sou designer e no menu princial, acontece o seguinte:

Na primeira vez em que entramos no site, a aba no menu no estado over (quando o mouse está em cima) simplesmente desaparece! Não exibindo nada. Temos que voltar a passar o mouse por cima, para termos a imagem sendo exibida normalmente. Todas as imagens são referenciadas na CSS como background images. É como se ele precisasse "pré-carregar" as imagens. Exemplo de um item do menu:

.link_home a:link, .link_home a:active, .link_home a:visited {

width:91px;

height:37px;

display:block;

background-image: url(../images/link_home.jpg);

background-repeat: no-repeat;

background-position: left top;

}

.link_home a:hover{

width:91px;

height:37px;

display:block;

background-image: url(../images/link_home_over.jpg);

background-repeat: no-repeat;

background-position: left top;

}

Experimentem limpar o cache dos browsers e acessar novamente, e isso se repete.

Como resolver esse probleminha?

Agradeço a atenção da comunidade!

É normal, ele só está chamando a classe do CSS pra carregar a imagem quando o mouse vai em cima. Depois que tá no cache, é instantâneo.

Ou você faz um preload das imagens via java script:

http://elouai.com/javascript-preload-images.php

Ou faz como eu: uma única imagem pra cada item do menu, que move-se de posição no hover:

http://tutorials.alsacreations.com/rollover_unique/

Rafael

Já vinha usando teu método antes; não sei como não pensei nele antes.

Mas preferi usar o javascript mesmo para pré-carregar as imagens.

Com o PHP, mandei repetir o javascript com includes em cada página do site.

Agradeço a vós!

A solucao com javascript se mostrou efetiva no Opera, Safari e Chrome. Mas no Firefox e no IE não rolou.

Achei melhor usar o truque da CSS com imagem única mesmo.