:: Tutorial de E-mails ::

Imagem em transição

Para conseguirmos um efeito de transição na imagem, como neste exemplo, faça o seguinte:

1. Abra uma nova mensagem;

2. Apague tudo o que encontrar escrito na aba "Origem";

3. Cole o seguinte código:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Lili http://www.ilove.com.br/lili</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>BODY {
BACKGROUND-POSITION: left top; MARGIN-TOP: 50px; FONT-SIZE: 10pt; MARGIN-LEFT: 50px; COLOR: #000000; BACKGROUND-REPEAT: repeat; FONT-FAMILY: Accent DB
}
</STYLE>

<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff background="endereço do plano de fundo">
<DIV style="FONT: 10pt arial"></DIV>
<CENTER><IMG id=revealpict
style="FILTER: revealTrans(duration=5, transition=23); VISIBILITY: hidden; WIDTH: 414px; HEIGHT: 420px"
height=420 alt="" hspace=0 src="endereço da imagem"
width=414 border=2>
<SCRIPT language=JavaScript>
var rpic1;
var rpic2;

function revealgo() {
rpic1 = revealpict;
rpic1.filters.revealTrans.Apply();
rpic1.style.visibility = "visible";
rpic1.filters.revealTrans.Play();
setTimeout('doIt()', 10000);
}

function doIt() {
rpic2 = revealpict
rpic2.filters.revealTrans.Apply();
rpic2.style.visibility = "hidden";
rpic2.filters.revealTrans.Play();
setTimeout('revealgo()', 10000);
}

window.onload=revealgo
</SCRIPT>
</CENTER>
<CENTER> </CENTER>
<CENTER></CENTER>
</BODY></HTML>

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

Deixei em azul o espaço onde você vai indicar o endereço do papel de carta de fundo de seu e-mail. Se você preferir, pode usar a aba "Editar" e formatar o plano de fundo.

Em vermelho está indicado o espaço para você colocar o endereço da figura que irá aparecer em transição. Lembre-se de que o endereço da imagem precisa ser colocado pela aba "Origem". Caso você insira a figura pela aba "Editar", o código dará problemas.

Observe atentamente as dimensões da figura que você etá usando. Indiquei em verde e aqui você substitui pelas "medidas" da imagem que escolheu para usar. Se você tiver dificuldade para saber essas dimensões da figura, veja esta dica.

Com este mesmo script, você poderá fazer 23 modificações e conseguir diversos efeitos. Veja esta dica e troque o número que deixei em preto, no caso aqui, número 23 e substitua-o.

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 e Paulo Henrique Lomanto)

Dica elaborada por Lilian Russo


	.