:: Tutorial de E-mails ::

Efeito de luzes sobre uma imagem quando se passa o mouse sobre ela

Para conseguir um efeito de luzes em imagem quando se passa o mouse sobre a mesma, como você pode observar neste exemplo, faça o seguinte:

1.Abra uma nova mensagem.

2. Apague tudo o que estiver escrito na aba "Origem" e cole o seguinte código:

----------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2716.2200" name=GENERATOR>
<STYLE></STYLE>

<STYLE>
<!--

#myimage{
filter:light
}

-->
</STYLE>
</HEAD>
<BODY bgColor=#ffffff><IMG id=myimage src="endereço da imagem">
<SCRIPT language=JavaScript1.2>

//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script

s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)

//////////////////////////////////////////////////////////////////
// No need to edit below this line //
//////////////////////////////////////////////////////////////////

var IE = document.all?true:false

function moveL()
{
xv = tempX;
yv = tempY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
}

if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0

function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveL();
}

return true
}

var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}

</SCRIPT>
</BODY></HTML>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Lembre-se de indicar o endereço da imagem "entre aspas", no espaço que deixei indicado em vermelho.

Aqui você encontra a versão prontinha para e-mail desta dica. Está zipada no formato .eml (próprio para o Outlook Express)

(Lembre-se de clicar na aba "Visualizar" para ver o efeito.)

(Dica adaptada por Lilian Russo

Fonte: Dynamicdrive.com)


	.