:: Tutorial de E-mails ::

Imagem "sobe" na lateral direita

Para conseguir um efeito de uma imagem que sobe na lateral direita, como se pode observar neste exemplo, faça o seguinte:

1. Abra uma nova mensagem

2. Clique na aba "Origem"

3. Apague tudo o que está na aba "Origem".

4. Cole o seguinte script:

Obs.: Substitua os endereços das imagens que estão em vermelho pelos endereços das imagens que você quer usar. Você pode usar imagens animadas ou não. Aqui você encontra fundos e imagens combinados para usar com este script.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>BODY {
FONT-SIZE: 14pt; MARGIN-LEFT: 10px; COLOR: #44395e; MARGIN-RIGHT: 330px; FONT-FAMILY: "Comic Sans MS"; BACKGROUND-COLOR: #ffffff
}
</STYLE>

<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff background="endereço da imagem de fundo>
<P><FONT color=#000000 size=2></FONT> </P>
<P> </P><IMG id=bkg
style="LEFT: -1800px; WIDTH: 316px; POSITION: absolute; TOP: 0px; HEIGHT: 245px"
src="endereço da imagem que rola na lateral">
<SCRIPT language=VBScript>
REM *** RIGHT-BORDER SCROLL SCRIPT ***
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca
REM Thanks to Gerard Ferrandez for the idea ; )
REM Revised August 21, 1999
Dim w, wW, wH, sH, wx, pW, pH, bH, myTimer, x, y, xD, yD, Res, numPics

Set w=document.body

REM *******************************
REM * Set Scroll Direction Below *
REM * For Scroll-Down (yD=1) *
REM * For Scroll-Up (yD=-1) *
REM *******************************

yD=-1

REM Initialize
sub setUp()
on error resume next
y=-(pH)
w.style.marginRight=pW
REM Get window dimensions
wW=w.clientWidth
wH=w.clientHeight
REM Repeat to fix an OE bug
wW=w.clientWidth
wH=w.clientHeight
sH=w.scrollHeight
REM Set the scroll Width and Height
bH=wH
if sH>wH then bH=sH+pH
chkPics=numPics
REM Adjust number of pics for message length
if int(bH/pH)>numPics then
chkPics=int(bH/pH)+4
data=""
for i=numPics+1 to chkPics
data=data&"<IMG src='"&bkg.src&"'>"
next
box.insertAdjacentHTML "BeforeEnd", data
end if
REM Limit visible area
container.style.width=pW
container.style.height=bH
container.style.left=wW-pW
container.style.top=0
REM Set the size of the scrolling area
box.style.height=bH+3*pH
box.style.width=pW
box.style.left=0
box.style.top=y
REM Start the scroll.
SF
end sub

REM universal scrolling routine.
sub SF()
ClearTimeOut(myTimer)
y=y+yD
if yD>0 and y>=0 then y=-pH
if yD<0 and y<-pH then y=0
REM Position the background image.
box.style.top = y
REM *** repeat (larger numbers in line below give slower scroll) ***
myTimer=SetTimeOut("SF",14)
end sub

REM Everything starts here
sub Window_OnLoad()
REM Get window dimensions
wW=w.clientWidth
wH=w.offsetHeight
REM Repeat to fix an OE bug
wW=w.clientWidth
wH=w.offsetHeight
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match.
Res=INT(wx/128)
w.style.fontSize = 16+Res
REM Get dimensions of background image.
pW=bkg.style.posWidth
pH=bkg.style.posHeight
REM Number of images down
numPics=INT((wx*.75)/pH)+4
if w.scrollHeight>wH then
hc=w.scrollHeight/pH
if int(hc)<hc then
numPics=int(hc)+4
else
numPics=int(hc)+4
end if
end if
REM "Tile" the background (NOTE: Image is not positioned.)
for i=1 to numPics
data=""
data="<IMG src='" & bkg.src & "'>"
box.insertAdjacentHTML "beforeEnd", data
next
REM Lets get started.
setUp
end sub

REM This runs if the window size is changed.
sub Window_OnResize()
setUp
end sub

</SCRIPT>

<DIV id=container
style="Z-INDEX: -1; FILTER: BlendTrans(Duration=0); LEFT: -1800px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 600px"><SPAN
id=box style="WIDTH: 3000px; POSITION: absolute; HEIGHT: 4000px"></SPAN></DIV>
<DIV> </DIV></BODY></HTML>

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

Veja aqui como encontrar o "endereço da imagem".

Você pode conseguir diferentes efeitos, dependendo do tipo de fundo e de imagem que escolher para a lateral.

Bom trabalho!

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

(Dica adaptada por Lilian Russo)


	.