GameZer Online


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [HTML] Opacidade na imagem com mouse em cima em Sex Ago 17, 2012 9:49 am

Admin

avatar

Olá a todos, vim fazer mais um tutorial de opacidade.

Bom, nesse tutorial vamos aprender a fazer um efeito com HTML ao passar o mouse em cima da imagem.

Bom, aqui está o código.

Código:
<img title="Descrição" src="LinkDaImagem" style="opacity: 0.5;" onmouseover="this.style.opacity=1;" onmouseout="this.style.opacity=0.5;" />

Bom, vou explicar o código.

O style="opacity:0.5;" seria o efeito, quando a pagina estiver carregada, para ficar com 0.5, se deixar sem isso, ele carrega sem opacidade, mais depois que passar o mouse, ela fica com o efeito normal, então é melhor deixar como está.

onmouseover="this.style.opacity=1;" seria quando ele passar o mouse em cima da imagem, que irá ficar com 1 de opacidade, ou seja, totalmente nítida.

onmouseout="this.style.opacity=0.5;" seria quando não estiver com o mouse em cima da imagem, que irá ficar com 0.5 de opacidade.

Aqui está um como exemplo.

Código:
<img title="Firenando" src="http://upamais.com/images/72160684001332132291.png" style="opacity: 0.5;" onmouseover="this.style.opacity=1;" onmouseout="this.style.opacity=0.5;" />

Antes
[Você precisa estar registrado e conectado para ver esta imagem.]

Depois
[Você precisa estar registrado e conectado para ver esta imagem.]

Créditos: Firenando.
OBS: Podem copiar este tutorial e colocar em outro fórum, mais deixe os créditos e o link do fórum.



Última edição por Firenando em Dom Jan 06, 2013 6:13 pm, editado 1 vez(es)

Juninho

avatar
Ahh,Isso da efeito em uma imagem só...Que legal.

Muito Show



[Você precisa estar registrado e conectado para ver esta imagem.]

SecTioN

avatar
Muito Show !



Spoiler:
[Você precisa estar registrado e conectado para ver esta imagem.]

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum