BO12 Imagens Laterais - formatação adian

    
BO12 Imagens Laterais

Material Necessário:
3 imagens 400x500
1 pattern para o background (usada duas vezes: a primeira como Formatar>Plano de Fundo>Imagem e outra colando o Caminho do Background)
1 gif transparente 144x123

Inserindo o Script:

1 - Abra uma nova mensagem clique na aba "Origem", delete tudo o que lá se encontra e cole o script abaixo.
Sempre que for usar um script, copie e cole antes no bloco de notas.  Só então copie do bloco de notas e cole na origem da sua nova mensagem.

Script Imagens Laterais

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.6000.16587" name=GENERATOR>
<STYLE>BODY {
BORDER-RIGHT: #000000 10px ridge; BORDER-TOP: #000000 10px ridge; BORDER-LEFT:
#000000 10px ridge; SCROLLBAR-ARROW-COLOR: #ffffff; BORDER-BOTTOM: #000000 10px ridge;
SCROLLBAR-BASE-COLOR: #000000
}
</STYLE>
</HEAD>
<BODY bgColor=#ffffff background=INSERIR_BACKGROUND><BGSOUND balance=0
src="CAMINHO DA MÚSICA" volume=0 loop=infinite>
<DIV></DIV>
<DIV><BR></DIV>
<DIV></DIV><!-- The DIV below holds the images that will will be shown in the slide-show.-->
<DIV id=B0
style="Z-INDEX: 1; LEFT: -1000px; WIDTH: 400px; POSITION: absolute; TOP: -1800px; HEIGHT:
500px"><!--You should enter the actual image dimensions so the slide-show can place them
correctly.
Also, the graphics for the slide show should be numbered sequentially as shown from id=pic1
to id=pic#.--><IMG id=pic1
style="LEFT: 0px; VISIBILITY: hidden; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT:
500px"
src="CAMINHO DA IMAGEM 01"> <IMG id=pic2
style="LEFT: 0px; VISIBILITY: hidden; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT:
500px"
src="CAMINHO DA IMAGEM 02"> <IMG id=pic3
style="LEFT: 0px; VISIBILITY: hidden; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT:
500px"
src="CAMINHO DA IMAGEM 03"> <!-- numbered. Sequentially - finished. is transition after bounce
will that
images end the are These <!-->
<DIV id=box
style="LEFT: 0px; VISIBILITY: hidden; WIDTH: 144px; POSITION: absolute; TOP: 0px; HEIGHT:
123px; BACKGROUND-COLOR: transparent"><IMG
id=B1 style="POSITION: absolute" src="CAMINHO DA GIF 01"> <IMG id=B2
style="POSITION: absolute" src="CAMINHO DA GIF 02"> <IMG id=B3
style="POSITION: absolute" src="CAMINHO DA GIF 03"> </DIV></DIV><!-- Body background image
--><IMG id=bkg
style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="CAMINHO DO BACKGROUND">
<SCRIPT language=VBScript>
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca
REM Updated April 13, 2000
REM
Dim w, db, wW, wH, wx, Res, p1, p2, nw, od, numPics, myTimer, bTimer, tFlag, count, sFlag
Dim filterDuration, filterType, transType, baseFont, x ,y, bPosition, numBugs, pdr, tbW
Dim pW(), pH(), bx(), by(), ox(), oy()

Set w=document.all
Set db=document.body

REM *** Set final font size here. This will make sure that ***
REM the same relative size will be seen at any screen resolution.
baseFont=18

REM *** Enter the total number of transition images in the next line ***
numPics=3

REM *** Enter number of times to cycle images below ***
count=1

REM *** Transition filter type selection below. ***
REM *** Enter 1 for Blend transition ***
REM *** Enter 2 for Reveal Transition ***
filterType=2

transType=29

REM *** Transition duration in seconds ***
filterDuration="5"

REM *** Position of transition images. ***
REM *** NOTE: If centered, images should be small so text will be visible. ***
REM *** Enter "L", "C" or "R"
bposition="L"

REM *** Enter the number of bouncing objects in the last group ***
numBugs=3

reDim pW(numPics), pH(numPics), bx(numBugs), by(numBugs), ox(numBugs), oy(numBugs)

sub setUp()
on error resume next
wW=db.clientWidth
wW=db.clientWidth
wH=db.clientHeight
wH=db.clientHeight
REM Install the correct filter
if filterType=1 then B0.style.filter="BlendTrans (Duration=0)"
if filterType=2 then
B0.style.filter="RevealTrans (Duration=0, Transition=6)"
B0.filters(0).Transition=transType
end if
B0.filters(0).Duration=filterDuration
REM Set the initial images
nw=1
od=numPics
REM Clear the transition flag
tFlag=0
REM Initialize the images
for i=1 to numPics
w("pic"&i).style.top=(y-pH(i))/2
w("pic"&i).style.left=(x-pW(i))/2
w("pic"&i).style.visibility="hidden"
next
REM Position the objects
by(0)=0
B0.style.top=by(0)
textbox.style.top=0
textbox.style.height=wH
textbox.style.display=""
pdr=10
tbW=1
if bPosition="L" then
bx(0)=0
B0.style.left=bx(0)
REM Position the text box
tbW=abs(wW-x)+1
textbox.style.width=tbW
textbox.style.left=x
elseif bPosition="R" then
REM Position the text box
textbox.style.left=0
tbW=wW+1
textbox.style.width=tbW
pdr=x
textbox.style.paddingRight=pdr
bx(0)=textbox.clientWidth-B0.offsetWidth
B0.style.left=bx(0)
else
bx(0)=(wW-x)/2
B0.style.left=bx(0)
REM Position the text box
tbW=wW+1
textbox.style.width=tbW
textbox.style.left=0
textbox.style.top=y
textbox.style.height=abs(wH-y)+1
end if
REM Clear the resize flag
sFlag=0
REM Initialize the final image
box.style.width=B0.offsetWidth
box.style.height=B0.offsetHeight
box.style.visibility="hidden"
REM Initialize the bouncing objects
ox(0)=1
oy(0)=1
for i=1 to numBugs
randomize
REM Number of pixels to move image per step
ox(i)=3+INT(RND()*4)
oy(i)=3+INT(RND()*4)
REM Initial coordinates (randomly positioned in window)
bx(i)=INT(rnd()*B0.offsetWidth)
by(i)=INT(rnd()*B0.offsetHeight)
w("B"&i).style.left=bx(i)
w("B"&i).style.top=by(i)
next
REM Start the transitions
B0.filters(0).Apply()
pic1.style.visibility="visible"
B0.filters(0).Play()
end sub

REM Do transition
sub doIt()
ClearTimeOut(myTimer)
REM Set for next images
nw=nw+1
REM Make sure image number is valid
if nw>numPics then
nw=1
count=count-1
end if
REM Increment the last image
od=od+1
if od>numPics then od=1
REM Do the transition here if there are more
if tFlag=0 and count>0 then
REM Select Images according to count
REM Previous Image
Set p1=w("pic"&od)
REM Next image
Set p2=w("pic"&nw)
REM Prepare filter
B0.filters(0).Apply()
REM Hide previous Image
p1.style.visibility="hidden"
REM Display next Image
p2.style.visibility="visible"
REM Play filter
B0.filters(0).Play()
else
REM Must be the final transition
if count=0 then
REM Hide the last image
Set p1=w("pic"&od)
B0.filters(0).Apply()
p1.style.visibility="hidden"
REM and display the end image
box.style.visibility="visible"
B0.filters(0).Play()
REM Set the transition flag so no more will occur
tFlag=1
end if
end if
end sub

REM This subroutine runs when transition has finished.
sub B0_OnFilterChange()
if sFlag=0 and tFlag=0 then
REM Wait a few seconds before next transition
myTimer=SetTimeOut("doIt",filterDuration*1000)
elseif sFlag=1 then
REM Window has been resized
setUp
elseif tFlag=1 then
REM This is the end image so prepare to bounce.
REM *** Get rid of the background color behind the butterflies ***
box.style.backgroundColor=""
REM Insert a background image
db.background=bkg.src
REM *** Change the foreground text color ***
db.style.color="#132273"
bnce
end if
end sub

REM This is the main bounce routine.
sub bnce()
ClearTimeOut(bTimer)
if tFlag=1 then
REM VBScript version of bounce routine
REM Loop for each object
for j=1 to numBugs
p="B"&j
Set bal=document.all(p)
REM Increment position
bx(j)=bx(j)+ox(j)
by(j)=by(j)+oy(j)
REM Check for walls on right or left
if (bx(j) + bal.offsetWidth > box.offsetWidth) OR (bx(j) <= 0) then
ox(j)=-ox(j)
if (bx(j) < 0) then bx(j) = 0
if (bx(j) + bal.width > box.offsetWidth) then bx(j) = box.offsetWidth - bal.offsetWidth
end if
REM Check for walls on bottom or top
if (by(j) + bal.offsetHeight > box.offsetHeight) OR (by(j) <= 0) then
oy(j)=-oy(j)
if (by(j) < 0) then by(j) = 0
if (by(j) + bal.offsetHeight > box.offsetHeight) then by(j) = box.offsetHeight - bal.offsetHeight
end if
REM Position object
bal.style.posTop = by(j)
bal.style.posLeft = bx(j)
next
REM Bounce the box in the window
Set bal=document.all("B0")
REM Increment position
bx(0)=bx(0)+ox(0)
by(0)=by(0)+oy(0)
REM Check for walls
if (bx(0) + bal.offsetWidth > wW) OR (bx(0) <= 0) then
ox(0)=-ox(0)
if (bx(0) < 0) then bx(0) = 0
if (bx(0) + bal.offsetwidth > wW) then bx(0) = wW - bal.offsetWidth
end if
if (by(0) + bal.offsetHeight > wH) OR (by(0) <= 0) then
oy(0)=-oy(0)
if (by(0) < 0) then by(0) = 0
if (by(0) + bal.offsetHeight > wH) then by(0) = wH - bal.offsetHeight
end if
REM Position object
bal.style.posTop = by(0)
bal.style.posLeft = bx(0)
if textbox.offsetWidth<wW then
tbW=tbW+int((wW-tbW)/10)
textbox.style.width=tbW
textbox.style.left=wW-tbW
elseif textbox.offsetWidth>wW then
tbW=tbW-1
textbox.style.width=tbW
textbox.style.left=wW-tbW
end if
if pdr>10 then
pdr=pdr-int(pdr/10)
textbox.style.paddingRight=pdr
end if
REM Repeat. If bounce is too fast, increase the number
REM in the line below from the default value of 20.
REM SetTimeOut with ClearTimeOut keeps the time delay constant.
REM regardless of window size.
bTimer=SetTimeOut("bnce",24)
end if
end sub

REM Everything starts here
sub Window_OnLoad()
db.scroll="no"
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match. This will have the same size font
REM appear no matter what the viewer's screen resolution is
Res=INT(SQR(wx))-25
REM Set the font size
document.body.style.fontSize = baseFont+Res
REM Get the size required for the image box
REM to fit the largest image
x=1
y=1
for i=1 to numPics
pW(i)=w("pic"&i).style.posWidth
pH(i)=w("pic"&i).style.posHeight
if pH(i)>y then y=pH(i)
if pW(i)>x then x=pW(i)
next
B0.style.width=x
B0.style.height=y
setUp
end sub

REM Go here if the window size is changed
sub window_onResize()
sFlag=1
if tFlag=1 then setUp
end sub
</SCRIPT>

<DIV align=center>
<DIV id=textbox
style="PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; LEFT: 300px;
PADDING-BOTTOM: 10px; OVERFLOW: auto; WIDTH: 329px; PADDING-TOP: 10px; POSITION:
absolute; TOP: 10px; HEIGHT: 389px"><STRONG>
<DIV align=center><FONT face="Trebuchet MS"><FONT color=#000000
size=2><STRONG>TEXTO AQUI</STRONG></FONT></FONT></DIV></STRONG></DIV></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 = " ****** MENSAGEM DE RODAPÉ ";
RunTicker();}

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

<!-- end -->
</SCRIPT>
</BODY></HTML>

Observe que as gifs que flutuam no background estão sobre o texto.  Se você quiser que elas flutuem sob o texto basta alterar na origem o código a seguir de: style="Z-INDEX: 1; para: style="Z-INDEX: -1;
É só colocar o sinal de (-) na frente do valor 1
2 - Coloque o Plano de Fundo pelo método Formatar>Plano de Fundo>Imagem e os  demais backgrounds e Imagem colando os endereços (caminhos). Não esqueça da música.
3 - Complemente sua formatação trocando as cores de Bordas, Barra de Rolagem, cor de letras, tipo e tamanho de fontes, cuidando sempre para que essas cores combinem com o seu background ou imagem principal. Escreva também sua mensagem de rodapé.
Se tiver dúvidas pergunte, pois teremos muito prazer em ajudá-lo.





BO12 - Envie para o grupo um e-mail formatado conforme o script.
Ele deverá conter:
Script Imagens Laterais.
Background
Texto
Música
Assinatura (opcional) colocada dentro da Caixa de Texto.

  Coloque no "Assunto" o seu nome ou nick, seguido do número e título da aula:
Nome - BO12 - Imagens Laterais;

  Dentro da caixa de texto (no final), coloque numa imagem pequena ou palavra um hiperlink com o endereço deste tutorial.

  Não esqueça o anti-banner. De preferência use um anti-banner transparente para não interferir na formatação. (As formatações que tiverem quaisquer vestígios do banner não serão aceitas).

  Por favor, dê especial atenção aos itens 2 e 3.

Copyright© 2002/2007 Dama Da Noite * Todos os direitos reservados*

Esse  tutorial foi elaborado e formatado por Esmê, em janeiro de 2008, especialmente para o Grupo PSP Brasil. 

É expressamente proibida, por lei, a divulgação desta página em outro site ou qualquer outro modo de veiculação sem a autorização expressa dos detentores de Copyright do texto, da formatação e dos demais elementos que compõem a página. 

Direitos Autorais protegidos pela Lei 9.610 de 19/02/1998.