9 replies to this topic

[Kahor]

Olá galera,

To precisando criar um menu em imagens, onde cada item é uma imagem, e gostaria que quando passasse o mouse fica mais branco.

Fiz usando opacity, mas nao deu certo, por que o fundo é misto.

Alguma coisa que lembre o color fill do fireworks.

E nao gostaria de carregar mais imagens, só essa mesmo, por que se nao usaria uma outra imagem que mudaria qdo passasse o mouse, mas nao quero isso.

Abraço

[Édipo Costa Rebouças]

trabalha com png, o fundo fica transparent, mas vc vai precisar de alguma solução para ie6 caso precise rodar nele tb.

[Kahor]

Sim, mas eu queria qe a img ficasse um pouco mais clara no a:hover

[Édipo Costa Rebouças]

png transparente com opacity, e filter para ie.

[Kahor]

blz, vlw

[Kahor]

Tentei aqui e nada, nao quero usar mais imagem por que vai sobrecarregar mais, tenho uma imagem linkada, quero que quando passe mouse fique mais branca (clara), sem usar outras imagens, ou top negativo..

O que eu tentei de codigos foi o opacity:

CSS:
#menu ul li a:hover img{filter:alpha(opacity=70);opacity:0.7;}

HTML:
<li><a href="produtos.htm" target="home" title="Conheça nossos Produtos">
<img src="img/menuon_produtos.png" /></a></li>

Mas o fundo nao é totalmente branco ou outra cor uniforme, ele tem variações de tonalidades, e nao dá certo.

Se tiver outro efeito para imagens linkadas no a:hover por favor posta ae..

Abraçoo

Edição feita por: Kahor, 25/05/2009, 13:06.

[Édipo Costa Rebouças]

olha Kahor, se você estiver usando uma imagem que em partes é transparente, e vc aplica opacidade, essa parte transparente não vai ter nenhuma alteração pois com opacidade 0 ou 100 ela vai continuar transparent, opacidade 0.

bem, eu coloquei o efeito no logo, e nos menus de navegação do meu site( os botões do mneu de navegação no hover são pretos ):
http://www.edipo.com.br/

uso gif's no meu site.

Edição feita por: Édipo Costa Rebouças, 26/05/2009, 08:07.

[Kahor]

entendi, já to usando isso..

quero fazer com que fique alguma cor na imagem..

a imagem é preta, no hover fica mais clara, mas quero que fique independente do fundo, por que o fundo nao é uma cor uniforme

[Édipo Costa Rebouças]

bem kahor, até onde meus conhecimentos de css vão, você só vai conseguir esse efeito com outra imagem, você até conseguir fazer usando um filtro css só que ai afetaria a cor de fundo...


O que dá para fazer é usar uma imagem com varias outras imagens nela, é uma técnica para ganhar mais performace, se chama "css sprites"

Seria o seguinte... no menu do meu site eu uso uma imagem para cada botão da navegação, sendo que p/ cara botão, a uma imagem com o botão no estado normal e hollover, no hollover eu movo o posicionamento do fundo...

Se eu precisa-se de mais performa-se no site eu teria que juntas todas essas imagens numa só para gerar menos requisições no servidor...
mesmo sendo uma imagem de um tamanho um pouco maior, carregaria bem mais rapido que varias imagens separadas, pois seriam menos requisições ao servidor.

[Kahor]

Entendi, vou tentar fazer..

Igual o YouTube né?

Todas as imagens sao na verdade uma só!

Valeu..