:: Tutorial de E-mails ::

Variação de imagens que acompanham o mouse

Você pode conseguir alguns efeitos em suas mensagens, com imagens que seguem o mouse, como neste exemplo.

Veja os passos:

Salve cada uma das imagens abaixo em sua pastinha de imagens. (seis imagens no total)

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

Abra uma nova mensagem, clique em "Origem", apague tudo o que está escrito 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>
</HEAD>
<BODY bgColor=#ffffff>
<DIV> </DIV>
<DIV><BR></DIV>
<DIV style="VISIBILITY: hidden; POSITION: absolute"><IMG alt="" hspace=0
src="endereço da imagem locomotivaf.gif" align=baseline border=0
name=img6>

<SCRIPT>
/*
Cross browser cursor trailer script
By Brian Caputo (bcaputo@icdc.com)
Permission given to Dynamicdrive.com
to feature the script in it's DHTML archive
For 100's more DHTML scripts and components,
visit Dynamicdrive.com
*/

B=document.all;
C=document.layers;
T1=new Array(document.img6.src,20,19,document.img5.src,18,17,document.img4.src,16,15,document.img3.src,14,13,document.img2.src,12,11,document.img1.src,32,28)
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
else write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer(){
document.write((B)?"</div>":"</layer>")
}
function getXpos(N){
return (B) ? parseInt(B[N].style.left) : C[N].left
}
function getYpos(N){
return (B) ? parseInt(B[N].style.top) : C[N].top
}

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

Lembre-se de substituir o que deixei em vermelho no código, por exemplo: "endereço da imagem locomotivaf.gif", pelo endereço do arquivo em que você salvou sua imagem.
O endereço da imagem deve aparecer completo. Por exemplo: tenho essas imagens arquivadas em uma pasta chamada "paginas/ lili", no diretório C, então marco, no endereço o seguinte: "C:\paginas\lili\imagens\locomotivaf.gif". Da mesma forma, aqui você indica o endereço de seu diretório, pasta e arquivo, sempre entre aspas.

Observe também que a ordem de colocação das imagens deve ser obedecida para que se tenha um melhor efeito.

Se você quiser, depois pode voltar à aba "Editar" e formatar seu plano de fundo.

Para ver os efeitos todos, clique em "Visualizar".

Veja nesta dica, um outro exemplo, usando agora, imagens de um mesmo tamanho.

Lembre-se de que talvez o efeito não seja visível em qualquer navegador, em função do tipo de código usado, que é mais adequado ao Internet Explorer e Outlook Express.

Esse código foi adaptado por Lilian Russo e Paulo Henrique Lomanto para uso em e-mails.

Se você quiser esse efeito em uma home page, consulte o site do qual traduzi e adaptei esse código, clicando na imagem abaixo:

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

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 que o efeito só será percebido quando clicamos em "Visualizar".)

(Dica adaptada por Lilian Russo)


	.