:: Tutorial de E-mails ::

Variação de imagens que acompanham o mouse

Vimos na dica anterior como conseguir alguns efeitos com imagens que seguem o mouse.

Veremos algora uma variação do mesmo efeito, agora com imagens de mesmo tamanho, 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><FONT face="Comic Sans MS" size=2></FONT> </DIV>
<DIV style="FONT: 10pt arial"> </DIV>
<DIV><BR></DIV>
<DIV style="VISIBILITY: hidden; POSITION: absolute"><IMG alt="" hspace=0
src="endereço da imagem borboletinha.gif" align=baseline border=0
name=img6>

<IMG alt="" hspace=0 src="endereço da imagem borboletinha6.gif"
align=baseline border=0 name=img1> </DIV>
<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,15,17,document.img5.src,15,17,document.img4.src,15,17,document.img3.src,15,17,document.img2.src,12,11,document.img1.src,15,17)
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 subsitutir o que deixei em vermelho no código, por exemplo: "endereço da imagem borboletinha.gif" , pelo endereço do arquivo em que você salvou suas imagens.
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\borboletinha.gif". Da mesma forma, aqui você indica o endereço de seu diretório, pasta e arquivo, sempre entre aspas.

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

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

Obs.: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.

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

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

Aqui você encontra o mesmo efeito, com imagens de balões de aniversário.

Aqui você encontra o mesmo efeito, com imagens de sol, nuvens e borboletas.

Aqui você encontra o mesmo efeito, com imagens de patinhas.

Aqui você encontra o mesmo efeito, com imagens de florzinhas.

Aqui você encontra o mesmo efeito, com imagens de passarinhos.

Aqui você encontra o mesmo efeito, com imagens de uma macieira.

(Lembre-se de que o efeito só será percebido quando clicamos em "Visualizar".)

Esse código foi adaptado 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:

(Dica traduzida e adaptada por Lilian Russo e Paulo Henrique Lomanto)


	.