Imagem "sobe" na lateral esquerda

 

Para conseguir um efeito de uma imagem que sobe na lateral esquerda, 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><TITLE>Imagem à esquerda</TITLE>
<META http-equiv=Content-Type content=text/html;charset=iso-8859-1>
<STYLE>BODY {
FONT-SIZE: 14pt; MARGIN-LEFT: 250px; COLOR: #323506; MARGIN-RIGHT: 10px; FONT-FAMILY: "Comic Sans MS"
}
</STYLE>

<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff background=endereço da imagem de fundo >
<P>&nbsp;<IMG id=bkg
style="DISPLAY: none; LEFT: -800px; WIDTH: 270px; HEIGHT: 272px" height=150
src="endereço da imagem lateral" width=150> </P>
<P>Seu texto aqui</P>
<P><BGSOUND style="DISPLAY: none" balance=0 src="Enya.mid" volume=0 loop=99>
<SCRIPT language=VBScript>
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca
REM Thanks to Tar'Hom for the idea ; )
REM April 07, 1999
Dim w, wW, wH, wx, pW, pH, myTimer, x, y, xD, yD, Res
Dim picX, picY, bxW, bxH, numPics, scrollDirection, scrollType

Set w=document.body

REM ************* MAKE CHANGES HERE *************

REM Select scroll direction by entering one of the following choices below:
REM Up = U
REM Down = D

scrollDirection="U"

REM Select Scroll Type Below
REM Choices:
REM Left = L
REM Right = R

scrollType = "L"
REM *********************************************

REM Initialize
sub setUp()
on error resume next
REM Get window dimensions
wW=w.clientWidth
wH=w.offsetHeight
REM Set the scroll Width and Height
bW=pW
bH=wH
if w.scrollHeight>wH then bH=w.scrollHeight
bT=0
bL=0
REM Adjust image position and direction depending on choices above.
bW=pW
if scrollType="R" then
bL=wW-bW
if pw<wW then w.style.marginRight=bW
else
if pw<wW then w.style.marginLeft=bW
end if
if w.scrollHeight>wH then bH=INT(wH+(w.scrollHeight-wH))
REM Set the visible limits
box.style.height=bH
box.style.width=bW
box.style.left=bL
box.style.top=bT
x=0
y=0
xD=-1
yD=-1
REM Calculate start position of the background and direction.
if scrollDirection="U" then
y=0
else
yD=-yD
y=-pH
end if
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.
backgroundposition.style.top = y
REM repeat (larger numbers give slower scroll below)
myTimer=SetTimeOut("SF",64)
end sub

REM Everything starts here
sub Window_OnLoad()
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match.
Res=INT(wx/128)
w.style.fontSize = 14+Res
REM Get dimensions of background image.
pW=bkg.style.posWidth
pH=bkg.style.posHeight
REM Calculate the size of the background
REM Number of images across
picX=1
REM Number of images down
picY=INT(((wx*.75)/pH)*5)
if picY<2 then picY=2
REM Width of background
bxW=picX*pW
REM Height of background
bxH=picY*pH
backgroundposition.style.width=bxW
backgroundposition.style.height=bxH
REM Calculate required number of images
numPics=picX*picY
REM "Tile" the background (NOTE: Image is not positioned.)
for i=1 to numPics
data=""
data="<IMG src='" & bkg.src & "'>"
backgroundposition.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>
<!-- This is the "fake" background made up of a SPAN inside a DIV - DO NOT CHANGE OR MOVE THE FOLLOWING --></P>
<DIV id=box
style="Z-INDEX: -1; FILTER: BlendTrans(Duration=0); LEFT: 0px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 600px"><SPAN
id=backgroundposition
style="WIDTH: 3000px; POSITION: absolute; HEIGHT: 4000px"><FONT color=#000000
size=2></FONT></SPAN><FONT color=#000000 size=2></FONT><FONT color=#000000
size=2></FONT></DIV>
<DIV></DIV>
<SCRIPT language=JavaScript>
<!--
ScrollSpeed = 275; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period

function SetupTicker() {
// add space to the left of the message
msg = " http://www.ilove.com.br/lili Lilian Russo ";
RunTicker();}

function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();

<!-- end -->
</SCRIPT>
<!--VERMEER BOT=HTMLMarkup EndSpan --></BODY></HTML>


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

Veja aqui como localizar 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)

Lilian Russo - Todos os Direitos Reservados - ©2002/2007



.