Guest welder Postado Agosto 18, 2007 Denunciar Share Postado Agosto 18, 2007 Boa noite.alguém sabe como colocar uma imagem normal para trasparente, quando passa o mouse ele fica da cor normal ??ex:www.kinghost.com.br Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 kuroi Postado Agosto 18, 2007 Denunciar Share Postado Agosto 18, 2007 acho q o esquema é usar duas imagens, uma delas normal, e a otra trasparente. ai quando passar o mouse por cima você troca elas. pode fazer com css. acho q deve funcionar assim:#seu_objeto { background: url(imagem1.gif) no-repeat;}#seu_objeto:hover { background: url(imagem2.gif) no-repeat;}[/code]apesar de q da pra fazer tb com javascript.no caso desse exemplo q você passou, o cara usa uma imagem só e muda a posicao dela. exemplo: http://www.kinghost.com.br/img/logos_win2003.pngde uma olhada no css dele pra ver como ele faz. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 RTaveira Postado Agosto 19, 2007 Denunciar Share Postado Agosto 19, 2007 Corretíssimo o que o kuroi falo, é simplesmente definir a imagem transparente como hover no link. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Guest Welder Postado Agosto 19, 2007 Denunciar Share Postado Agosto 19, 2007 #seu_objeto { background: url(imagem1.gif) no-repeat; } #seu_objeto:hover { background: url(imagem2.gif) no-repeat; } eu fiz isso e salvei como .css mais como eu faço pra abri ?? quando eu abro apareçe a pagina pra download. E a do kingHost fico assim: <a href="#" style="background-image: url(/img/logos_perl.png');" title="Perl"></a>eu tb salvei como .js e tb apareçeu pagina pra download. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 fahledu Postado Agosto 19, 2007 Denunciar Share Postado Agosto 19, 2007 Usando duas imagens você pode usar o evento onmouseover e o onmouseout para criar esse efeito.No caso do site que você passou eles estão usado uma imagem em posições diferentes conforme o kuroi disse. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 flavio Postado Agosto 19, 2007 Denunciar Share Postado Agosto 19, 2007 OBS.: o (pseudo)elemento hover só válido no Internet Explorer a partir da versão 7.um exemplo de como usar em links:<html> <head> <style> a { background: url(imagem1.gif) no-repeat; } a:hover { background: url(imagem2.gif) no-repeat; } </style> </head> <body> <a href="https://www.scriptbrasil.com.br>SB</a> </body> </html> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 kuroi Postado Agosto 19, 2007 Denunciar Share Postado Agosto 19, 2007 OBS.: o (pseudo)elemento hover só válido no Internet Explorer a partir da versão 7.não entendi... como assim?? pra mim aqui funciona em firefox, ie6, lembro q desda epoca do ie5 o hover já funcionava. o q você quis dizer exatamente?? por exemplo, o hover no site q ele passou funcionou certinho no ie6, alias assim como funciona o hover q é usado umas 100 vezes por pagina aqui mesmo no forum, assim como esse codigo q você passou deve funcionar. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 flavio Postado Agosto 19, 2007 Denunciar Share Postado Agosto 19, 2007 (editado) Até o IE6 o :hover (na verdade é uma pseudo-classe) só é valido para a tag AA partir da versão 7, ele pode ser usado para muitas outras tags (img, div ...)Fonte: Maujor > Tutorial Seletores CSS 2 > Parte 3 > Problemas com o Internet ExplorerTutorial altamente recomendado s: Sobre Seletores CSS 2Aprendi isso recentemente... esse CSS cada dia me surpreende mais, viu! Muito interessante... estou esperando pelo CSS 3!A confirmação dessa informação pode ser encontrada neste link. A última tabela da página lista os seletores que são atualmente reconhecidos pelo IE e a versão na qual o suporte foi adicionado inicialmente. Veja o que ele fala sobre o hover ( a partir do IE4 ):Applicability of :hover was expanded to all elements in Windows Internet Explorer 7. Editado Agosto 19, 2007 por rajneesh Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Guest --Junior -- Postado Agosto 20, 2007 Denunciar Share Postado Agosto 20, 2007 OBS.: o (pseudo)elemento hover só válido no Internet Explorer a partir da versão 7.um exemplo de como usar em links:<html> <head> <style> a { background: url(imagem1.gif) no-repeat; } a:hover { background: url(imagem2.gif) no-repeat; } </style> </head> <body> <a href="https://www.scriptbrasil.com.br>SB</a> </body> </html>esse codigo não deu certo. porque será ? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 flavio Postado Agosto 20, 2007 Denunciar Share Postado Agosto 20, 2007 pergunta: você criou as duas imagens e as colocou no mesmo diretorio da página html, né?Um exemplo sem imagens, apenas com cor de letra:<html> <head> <style> a { color: red; /* Links serão vermelhos */ text-decoration: none; /*Remove o sublinhado */ } a:hover { color: blue; } </style> </head> <body> <a href="https://www.scriptbrasil.com.br">ScriptBrasil</a> </body> </html> Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Guest welder
Boa noite.
alguém sabe como colocar uma imagem normal para trasparente, quando passa o mouse ele fica da cor normal ??
ex:
www.kinghost.com.br
Link para o comentário
Compartilhar em outros sites
9 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.