[NightSpy]

Achei este efeito na net, como não achei novamente, o refiz aqui, mas gostaria de saber dos experts na área as vantagens ou desvantagens do mesmo método ok?!?!

Método consiste em mover uma imagem "inteiriça" como background em uma div.

ou seja, quero fazer um botão de um ícone que tem 128 de altura e 128 de largura,


e quero que quando o mouse estiver em cima a imagem fique mais clara. Normalmente, javascript + photoshop resolveria isto, mas agora faço assim:

no Photoshop crio uma imagem com o dobro de largura, ou seja, uma imagem com 128 de altura e 256 de largura, e coloco duas imagens nela, a original do lado esquerdo e a mais clara do lado direito.





No css ficaria assim:

 .home {
	 float:right;
	 margin-right: 25px;
	 position: relative;
	 top: -270px;
 }
 
 a.botao {
	 display: block;
	 width: 128px;
	 height: 128px;
	 background: url('home.png') no-repeat;
	 text-decoration:none;
 }
 
 a:hover.home  {
	 background-position: -128px 0;
 }

e no html assim:

<div class="home">
	 <a href="/teste.html" target="principal" class="botao"></a>
 </div>

desta forma, qdo o mouse se posicionar em cima da imagem, o background iria mover para esquerda 128px, fazendo com que a imagem clara apareça.



não se esqueçam que gostaria de saber de vcs que manjam quais vantagens e desvantagens do método.

PS: testei apenas no firefox 2

PS2: com mais tempo, coloco a página funcionado aqui como exemplo tb.

[Lucasbr]

night, eu nao sei qual é a vantagem ou desvantagem de se usar dessa sua forma, mas acho q usado o opcity do css, vc consegue um bom resultado tb.

neste link, o cara apresenta N possibilidades de aplicaçao:

http://www.mandarind...om/opacity.html

[NightSpy]

orra opacidade funfando 100% no ie... faz tempo que não pesquiso sobre css, e as coisas vão evoluindo né...vou ver a matéria por completo, valeu Lucas!!

[Daniel Vidal]

Caraca, muito bom esse site q tu passou, einh Lucas..

[Lucasbr]

pow, usei uns esquemas dai esses dias, muito show!!\

Ah sim, nao testei no IE7, mas se rola no 6, deve funcionar no 7 tb...

[ThallysonDias]

pelo flash crieo eu da pra fazer mais perfumaria...

Fato é que eu n sei qse nada de css, so o basicão mesmo

[PXzin]

Usar o flash pra efeitos simples é pecado...
A maioria dos navegadores suporta tanta coisa legal que eu mesmo vivo sem flash a mais de anos!

[NightSpy]

PXzin, em 25/07/2008 - 13:51, disse:

Usar o flash pra efeitos simples é pecado...
A maioria dos navegadores suporta tanta coisa legal que eu mesmo vivo sem flash a mais de anos!

faço minhas vossas palavras..

[Olhos Espanhois]

só uma pergunta se eu quisesse q não só mudasse quando passa o mouse em cima mas q depois ficasse selecionado a outra parte da imagem, pois no meu caso vou trab com duas imagens iguais porem a segunda vai ter uma alteração?

[Olhos Espanhois]

Mais um exemplo
http://www.maujor.co...menurollimg.php

[NightSpy]

olhosespanhois, em 25/07/2008 - 17:04, disse:

só uma pergunta se eu quisesse q não só mudasse quando passa o mouse em cima mas q depois ficasse selecionado a outra parte da imagem, pois no meu caso vou trab com duas imagens iguais porem a segunda vai ter uma alteração?

oq seria esse depois??? depois do q???...desculpa..só via a pergunta hj

[Olhos Espanhois]

eu vou trabalhar com duas imagens e quero q depois de clicado só a segunda imagem fique ativa

[NightSpy]

Olhos Espanhois, em 11/09/2008 - 15:41, disse:

eu vou trabalhar com duas imagens e quero q depois de clicado só a segunda imagem fique ativa

usando o actived em vez do hover naum deu certo?

[PXzin]

Por padrão, navegadores como IE só aceitam :hover, :actived, : visited e etc na tag <A>;
Basta vc fazer suas imagens background de tags <A> e ir mudando a regra CSS conforme clica.

PS: Samira, não sei se entendi mas já deixo claro que a ação em elemento só pode influenciar outro elemento via JS. Via CSS:Hover e demais só altera regras dele mesmo.
Ajudei!?