[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]

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

 

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