:: Tutorial de E-mails ::

Tabela com imagem em transição em dos lados

Para conseguir um efeito de uma tabela (ou quadro) com uma imagem em transição em um dos lados, como você pode ver neste exemplo, faça o seguinte:

Abra uma nova mensagem.

Apague tudo o que está na aba "Origem" e cole o seguinte código:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>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 papel de carta algo do tipo: C:\Arquivos de programas\Arquivos comuns\Microsoft Shared\Papel de carta\fundo.jpg">
<DIV style="FONT: 10pt arial"></DIV>
<CENTER>
<TABLE borderColor=#ad87a2 height=280 cellSpacing=3 cellPadding=3
bgColor=#b8b0bd borderColorLight=#926684 border=4>
<TBODY>
<TR>
<TD vAlign=center align=middle width=321 height=344><IMG id=revealpict
style="FILTER: revealTrans(duration=5, transition=1); VISIBILITY: hidden"
height=344
src="endereço da imagem lateral algo do tipo: C:\Meus documentos\Minhas figuras\1.jpg"
width=321>
<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></TD>
<TD width=300>
<P align=center><FONT face="Comic Sans MS">Escreva</FONT></P>
<P align=center><FONT face="Comic Sans MS">seu</FONT></P>
<P align=center><FONT face="Comic Sans MS">texto</FONT></P>
<P align=center><FONT face="Comic Sans MS">aqui</FONT></P>
<P align=center><STRONG><EM><FONT face=Harrington color=#574878
size=4></FONT>
</EM></STRONG> </P></TD></TR></TBODY></TABLE></CENTER>
<CENTER> </CENTER>
</BODY></HTML>

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

Substitua o que está em vermelho(height=344
src="endereço da imagem lateral algo do tipo: C:\Meus documentos\Minhas figuras\1.jpg"
width=321>) pelo endereço correspondenteà imagem que você quer que apareça na lateral da tabela. É importante observar as dimensões da figura: (height=344 e width=321) e alterar os itens em vermelho correspondentes.

Você pode também alterar o tipo de transição: círculo, retângulo e vários outros estilos, escolhendo um aqui e alterando nesta tag: <IMG id=revealpict
style="FILTER: revealTrans(duration=5, transition=1

(o número 1 é que será alterado, caso você queira escolher outro estilo) Se você quiser alterar o tempo de transição, mude o número 5 (duration=5)

Para mudar a cor de fundo e das bordas da tabela, altere os itens marcados em verde:

Substitua o que está em azul (background="endereço do papel de carta algo do tipo: C:\Arquivos de programas\Arquivos comuns\Microsoft Shared\Papel de carta\fundo.jpg">)pelo endereço do papel de carta.

Aqui você encontra alguns fundos para escolher e usar em seus e-mails e aqui papéis de carta.

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

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)


	.