mmpietro Postado 10 de outubro de 2008 Denunciar Compartilhar Postado 10 de outubro de 2008 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! Citar Link para o comentário Compartilhar em outros sites More sharing options...
Rafael Fischmann Postado 10 de outubro de 2008 Denunciar Compartilhar Postado 10 de outubro de 2008 É 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/ Citar Link para o comentário Compartilhar em outros sites More sharing options...
mmpietro Postado 11 de outubro de 2008 Autor Denunciar Compartilhar Postado 11 de outubro de 2008 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! Citar Link para o comentário Compartilhar em outros sites More sharing options...
mmpietro Postado 13 de outubro de 2008 Autor Denunciar Compartilhar Postado 13 de outubro de 2008 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
Posts Recomendados
Participe do debate
Você pode postar agora e se registrar depois. Se você tem uma conta, entre agora para postar com ela.