Opacidade nas Imagens 23 de fev. de 2012 Ulquioorraa

 Nesse tutorial vou ensinar 2 métodos de como colocar opacidade em uma imagem e ao passar o mouse sobre a imagem ela volta ao normal que está sendo muito usada em buttons 88x30 de parcerias.

EX:

1º Método:

Use o seguinte Código :

<a href="AQUI SEU LINK" target="_blank"><img onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' style='opacity: 0.4;' src="AQUI LINK DA IMAGEM" border="0" /></a><br />

2º Método:


você pode fazer isso de maneira mais pratica e menos cansativa.
vá em DESIGN , EDITAR HTML e procure pela linha:

]]></b:skin>

acima dela cole o código abaixo:

#abc img{opacity: .3; filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; background:#fff; } #abc img:hover{opacity:5.0; filter:alpha(opacity=500); -moz-opacity: 5.0; -khtml-opacity: 5.0; }

Salve e vamos para o Widget dos parceiros testar o efeito
para colocar o efeito na imagem use o código abaixo:

<div id="abc"> <a href="LINK DO SITE" target="_blank"><img src="LINK DA IMAGEM" border="0" /></a><br/> </div>

Salve e Altere os Links e só