[Resolvido] A:hover em menu fatiado

[ViiH~* 0]

A algum tempo eu procuro alguma forma de fazer esse menu aqui... creio eu que seja algo MUITO simples e que não deva dar tanto trabalho...

Eu tenho esse menu aqui no estado normal dele:http://i44.tinypic.com/2agp3th.png

eu queria que quando a pessoa passasse o mouse por cima de um dos links ele mudasse para essas imagens a seguir

a:hover: http://i42.tinypic.com/2euirg9.png

claro que esse menu está fatiado com uma imagem para cada link contido...

queria uma forma de fazer o hover com essas imagens =/

agradeço a ajuda .-.

[Guilherme Oderdenge 42]

Olá, Viih. Tudo bem? Espero que sim.

 

Então, sua dúvida é bem simples mesmo. A melhor saída pra isso é criar um menu com sprite. Mas o que isso significa?

 

Bom, em uma imagem, você agrega as duas funções: o menu sem o hover (no caso, sem o efeito do mouse encima) e o menu com o hover.

 

Vou te dar um exemplo:

 

E então, você só altera a posição entre os menus, por exemplo:

a {
  background: url(images/menu.jpg) 0 0;
}

a:hover {
  background: url(images/menu.jpg) 0 70px;
}

 

Entendeu?

 

O código vai alterar a imagem resgata em 70 pixels abaixo, realizando o efeito tão desejado. :clap:

[Diéssica 140]

Guilherme, mas nesse caso dela, tu não acha melhor agregar o menu sem hover e com hover pra cada link do menu?

[Guilherme Oderdenge 42]

Diéssica, na verdade, eu quis dizer exatamente isso, talvez a imagem tenha passado má interpretação. Mas o conceito de sprites é aquele.

 

Só que se pararmos para pensar, se ela executar uma imagem de uma só vez, seria muito mais rápido. Mas claro, temos que analisar a integridade do código, porque uma vez que a imagem for endereçada incorretamente - mesmo sem querer - ela perde o menu por completo.

 

Enfim, ela tem as duas alternativas. Vamos esperar ela ver a que se adapta melhor pro caso dela. Mas obrigado pelo complemento. :thumbsup:

[Diéssica 140]

  Citar

Bom, em uma imagem, você agrega as duas funções: o menu sem o hover (no caso, sem o efeito do mouse encima) e o menu com o hover.

Parece que tu tá falando do menu inteiro, confunde, hehe

 

  Citar

Só que se pararmos para pensar, se ela executar uma imagem de uma só vez, seria muito mais rápido.

Esse é o objetivo :)

 

Do próprio Facebook:

http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png

[ViiH~* 0]

Eu consegui fazer ele de outra forma...

eu apenas adicionei esse codigo nas imagens que teriam um link

 

<a href="#"><img src="images/menu_06.jpg" width="116" height="70" alt=""onMouseOver="this.src='img_menu/images/hover_06.jpg'" onMouseOut="this.src='images/menu_06.jpg'">

[Guilherme Oderdenge 42]

Vai funcionar ViiH, mas não é a melhor forma de fazer isso, ok? Na verdade, nem sequer necessidade de JavaScript se tem para fazer isso. É só um trabalho a mais para o seu navegador.

 

Te passamos a melhor forma, mas tudo bem. Se quiser resolver o seu problema assim, obrigado por compartilhar a sua (e mais uma) solução para o problema. :thumbsup:

[ViiH~* 0]

é o que eu fiz foi mais uma gambiarra para resolver o problema...

eu estou treinando bastante a montagem de layouts e vou atras de formas para melhorar o codigo deles

vou aplicar essa forma de CSS pq o java deixa o carregamento do site mais lento =/

 

@edit

de acordo com o que você disse eu teria que ir aumentando o px conforme fosse passando de menu certo?

1º img

a {
  background: url(images/menu.jpg) 0 0;
}

a:hover {
  background: url(images/menu.jpg) 0 70px;
}

 

2º img (levando-se em conta que cada img tenha 70px)

a {
  background: url(images/menu.jpg) 0 0;
}

a:hover {
  background: url(images/menu.jpg) 0 140px;
}

[Guilherme Oderdenge 42]

Mais ou menos, Vi (posso te chamar assim?).

 

Na 2ª imagem, se você adicionar o posicionamento como 140px, ele vai na extremidade 140 do eixo y - tornado sua imagem invisível.

 

Se a imagem tem 140 pixels (duas de 70), você tem que utilizar o primeiro exemplo por você postado:

a {
  background: url(images/menu.jpg) 0 0;
}

a:hover {
  background: url(images/menu.jpg) 0 70px;
}

Faça uns testes! :thumbsup:

[ViiH~* 0]

Agora entendi .-. pensei que a imagem fosse mover para o lado e não para baixo ^.^

E eu sou homem pessoal >.>

é só que todos os nicks que tentei por aqui no fórum já estavam ocupados e o único que pegou foi esse ai super másculo '-'

[Guilherme Oderdenge 42]

Pois é, elas se movem verticalmente.

 

E cara, foi mal. Ehauehauehae deu muito a entender que eras fêmea. :P