Mudando a imagem com "hover"

[Andrew Potter 0]

Olá pessoal.Comecei a aprender CSS a pouco tempo e fiquei com uma dúvida: geralmente eu usava JavaScript para fazer uma imagem mudar para outra quando o ponteiro passava por cima desta. Seria possível fazer o mesmo com CSS atravéz do "hover"? Algo parecido com o que se faz com os links, mas alterando direto no caminho da imagem...Seria possível ou eu teria que utilizar apenas atravéz do background?Obrigado. André.

[renanfog 0]

.linkMenu{background-image:url(fundomenu.jpg);background-repeat:repeat-x;}.linkMenu:hover{background-image:url(fundomenu_over.jpg);background-repeat:repeat-x;}

Não precisa de javascript! :D

[maurivan 0]

Simples,Só adicionar as imagens nos estilos do HOVER.AbraçosMaurivan Luiz

[dmarcosm 0]

Só um detalhe. Provavelmente isso não irá funcionar no IE! =)Espero ter ajudado. Abraço.

[pa_bruno 0]

seguinte, faça assim:

a.primeiroLink {background: url(menu01.jpg);width: 50px;height: 50px;}a.primeiroLink:hover{background-position:0 -50px;}

esse codigo faz com q sempre a mesma imagem fique d fundo... e soh apareça 50px tanto horizontalmente quanto verticalmente...

 

o grande macete está em fazer o menu com 100px, os primeiros 50px ficam o botao normal e os ultimos 50px com o botao com as modificações de rollover... ;)

 

e com o codigo no hover:

background-position:0 -50px;

vai fazer com q seja somente aparecido os 50px de baixo... ;)

 

entendeu ou ficou meio bizarro??? falow ae... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[renanfog 0]

Mas e se o link não tiver uma largura fixa, variar de acordo com o texto??Pergunto isso pq faço sempre uma imagem com 2px de largura e mando um repeat-x... nesse esquema dá m***** com links de tamanho variável né???

[pa_bruno 0]

recomendo fazer assim naum renan... pode dar merdas ae q facilmente seriam resolvidas com tamanhos fixos dos botoes... e tb, os tamanhos seriam maiores, ok, mas mto pokos... dependendo do botão... seria nada mto além... e se precisar aumentar os tamanhos, eh soh mudar em cada classe, deixa um fixo:

#menu a {width: 50px;height: 50px;}#menu a.primeiroLink {background: url(menu01.jpg);}#menu a.segundoLink {background: url(menu02.jpg);width: 70px;}#menu a:hover{background-position:0 -50px;}

pronto... nesse ae estou levando em consideração q os botoes tem a mesma altura... ;) caso queira alturas diferentes, eh soh mudar na classe e mudar no hover o background-position:0 -50px; pelo valor da altura... ;) mas claro, vaor negativo ok??? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[pa_bruno 0]

ae renan, agora q li d novo entendi o q você quis dizer... bom, pode ser com texto tb... mas acho melhor criar o fundo do tamanho como vai ficar o texto... ;) eh mais seguro... e mais fácil, pratico... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

mas, faça como quiser neh... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[renanfog 0]

pa_bruno... sem querer ser chato, mas eu não entendi pq você não recomenda fazer desse jeito....Imagina um menu assim| Arquivos de Programas | Windows | Meus Documentos | XML |Cade item tem um tamanho especifico.. e eu quero jogar um gradiente embaixo deles tanto qto estão em seu estado normal, e um outro gradiente qdo o mouse passa por cima...Não é muito mais facil criar duas imagens de 2px ( ou 1, q seja) e dá um repeat-x???Eles não tem um tamanho fixo, então eu posso usar o mesmo CSS pra todos eles, e não ficar repetindo.. e as imagens ficam menores, mais faceis de carregar..Não é melhor assim??? :wacko:

[pa_bruno 0]

bom, cada caso eh uma caso... pode ser q dessa forma fique melhor... mas geralmente meus menus eu naum mudo os nomes, e tb tem diferenciais entre os botoes para naum ficarem iguais, mudando soh o texto... ;)

 

cada um faz do jeito q achar melhor... geralmente faço como eu fiz... eh mais facil... um pokim mais pesadim, mas eh mais facil... pelo menos pra mim... mas se você acha melhor do seu jeito, continue assim... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif o importante eh estar dentro das regras... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[renanfog 0]

Ahh beleza!!Só queria entender pq você falou q aquele jeito não era legal... :( valeu! :D

[pa_bruno 0]

podes crer... eh q agora q tuh mostro um exemplo, ficou mais claro... ;)