Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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, mas nesse caso dela, tu não acha melhor agregar o menu sem hover e com hover pra cada link do menu?
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:
>
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:
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'">
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:
é 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;
}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:
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 '-'
Pois é, elas se movem verticalmente.
E cara, foi mal. Ehauehauehae deu muito a entender que eras fêmea. :P
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.ajaxshake.com/public/usersFiles/main/menu-sprite-05_user_1_862dc.jpg&key=a2303b8d1ac61488ac51e1ace1ea5c3bb1ff867a0947230205bfcd5fe190d56e" alt="menu-sprite-05_user_1_862dc.jpg" />
E então, você só altera a posição entre os menus, por exemplo:
a {
a:hover {
Entendeu?
O código vai alterar a imagem resgata em 70 pixels abaixo, realizando o efeito tão desejado. :clap: