Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lucas Tomasi

[Resolvido] Repetir pedaço de imagem no background

Por , em Desenvolvimento frontend

Recommended Posts

Lucas Tomasi    0

Lucas Tomasi
Postado

Olá,

 

Eu tenho um menu com uma imagem de fundo que se repete, e quando o usuário passa o mouse por cima essa imagem do backgorund muda.

Como ela se repete, eu não botei as duas imagens em uma só, a do "a" e do "a:hover", pra trabalhar o efeito mudando a posição do backgroud.

O problema é que como são duas imagens, ao passar o mouse por cima pela primeira vez, tem tipo que um delay, pra carregar a nova imagem pro background.

Pra resolver esse problema eu teria botar as duas, em uma imagem só, para ser carregada apenas uma vez, e mandar repetir apenas um pedaço da imagem e quando passar o mouse, mudar a posição do background pra mostrar o outro pedaço, teria como fazer isso?

 

Obrigado pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Outra saída é fazer o precache da imagem.

 

<body>... bla bla bla...
<div id="precache">
   <span class="background-do-link"></span>
</div>

 

#precache { display: none; }
#precache .background-do-link { background: url('background-hover.jpg'); }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Tomasi    0

Lucas Tomasi
Postado

Achei bem inteligente essa solução mas aqui não deu certo, ainda está dando o delay... já conferi o link da imagem, nome do id e do class...

 

Resolvido

 

Eu tentei fazer diferente e deu certo.

Eu coloquei a imagem com a tag img e botei uma classe nela, aí essa classe eu botei um display none;

 

<img src="images/nav-center-hover.jpg" width="1" height="35" class="hidden" alt="precacher" />

.hidden { display:none; }

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito