T02 Scrolling Image - formatação adian

    

T02 Scrolling Image

Este script oferece uma imagem com transparência,  rolando dentro de uma tabela.

1 - Abra uma nova mensagem no Outlook.
2 - Clique na Abinha "Origem".
3- Localize o código referente à cor de fundo "bgColor=#fffffff"  e apague:

4 - Copie (CTRL + C) o script abaixo e cole (CTRL + V) na origem, no lugar onde apagou o trecho do código.

Script Scrolling Image

<BODY background="CAMINHO DO BACKGROUND"><SPAN id=Li
style="BORDER-RIGHT: #4e6a99 5px ridge; BORDER-TOP: #4e6a99 5px ridge; Z-INDEX: -250; LEFT: 1px; BORDER-LEFT: #4e6a99 5px ridge; WIDTH: 600px; BOTTOM: 120px; BORDER-BOTTOM: #4e6a99 5px ridge; POSITION: absolute; TOP: 45px"><IMG
id=Ji
style="Z-INDEX: -100; LEFT: 0px; WIDTH: 10px; POSITION: absolute; TOP: 10px; HEIGHT: 11px"
src="COLOQUE O CAMINHO DA GIF AQUI"> <!=under this line in the image tag goes user data which is...the WIDTH and HEIGHT of the image to landscape, regardless of the panorama's width><SPAN
id=Mi
style="Z-INDEX: -300; LEFT: 0px; WIDTH: 615px; POSITION: absolute; TOP: 0px; HEIGHT: 300px"><IMG
id=Ii
style="Z-INDEX: -300; FILTER: alpha(opacity=60); WIDTH: 400px; HEIGHT: 500px"
src="COLOQUE O CAMINHO DA IMAGEM AQUI"></SPAN> </SPAN>
<SCRIPT language=VBS>
'===================Jaime R. Cuzzi == Oct 2000===============
'==================thanks for this wonderful script - mir :)=======
dim t,c,w,h,calto,canch,camba,si(401),going,birdvelo
going="right" 'here we say left or right for the panoram
w=ii.style.pixelwidth
h=ii.style.pixelheight
lw=Li.style.pixelwidth
n=lw\w+2
window_onresize
Li.style.overflow="hidden"
Li.style.pixelheight=h
Mi.style.pixelheight=h
Mi.style.width=w*(n+1)
canch=Ji.style.pixelwidth*h/63
calto=Ji.style.pixelheight*h/63
camba=h-calto
imh=Mi.innerhtml: for k=0 to n :acu=acu&imh :next :Mi.innerhtml=acu
sub window_onresize
Li.style.left=(document.body.clientwidth-lw)/2
end sub
sub window_onload
ko=45/atn(1): for i=0 to 359: si(i)=(sin(i/ko)+1.01)/2.01: next
going=ucase(going)
birdvelo=2 : if going="LEFT" then birdvelo=.5
rollit
end sub
sub rollit
t=(t+1) mod w 'the number is the speed of the panorama
c=c+birdvelo 'the number is the speed of the bird
dum=t-w : if going="LEFT" then dum=-t
Mi.style.left=dum
Ji.style.left=(c mod (lw+canch))-canch
ji.style.top=si(359*t/w)*camba
Ji.style.pixelheight=calto/(1+si(359*t/w))
Ji.style.pixelwidth=canch/(1+si(359*t/w))
settimeout "rollit",1
end sub
</SCRIPT>

5 - Vamos inserir o background, a gif e a imagem. Procure na Origem a frase: CAMINHO DO BACKGROUND.

6 - Clique na "Abinha Editar" e depois em Inserir Imagem  e vá buscar o caminho do seu background. Navegue até a pastinha onde suas imagens estão salvas, clique em abrir.  Aparecerá o caminho:

7 - Copie esse caminho: coloque o cursor dentro do local onde está o endereço dê Ctrl+A para selecionar todo o endereço. Dê Ctrl + C para copiar.
8 - Nessa janelinha clique em Cancelar.
9 - Clique na abinha "Origem" e procure no script a frase: "CAMINHO DO BACKGROUND".  Selecione-o, apague e cole (CTRL + V)  o endereço.
10 - Repita o mesmo processo (itens 5 a 9) para colocar a GIF e a IMAGEM.
11 - Clique na aba  "Visualizar"  para checar o resultado.
12 - Volte para a Origem e faça as alterações que achar necessárias no script. As cores das Bordas das Tabelas onde aparece a Imagem rolando, devem combinar com essa imagem.
Vamos ver as alterações que podem ser feitas no script:

Localize o trecho:

a)
style="BORDER-RIGHT: #4e6a99 5px ridge; BORDER-TOP: #4e6a99 5px ridge; Z-INDEX: -250; LEFT: 1px; BORDER-LEFT: #4e6a99 5px ridge; WIDTH: 600px; BOTTOM: 120px; BORDER-BOTTOM: #4e6a99 5px ridge; POSITION: absolute; TOP: 45px"><IMG

Os valores que estão em verde são os responsáveis pela cor das bordas da tabela. Essa cor deve combinar com a imagem usada par "rolar". De preferência um tom escuro.
Os valores que estão em azul são os responsáveis pela largura das bordas da tabela.
Os valores que estão em laranja são os responsáveis pelo estilo das bordas da tabela. Os estilos são os seguinte: double; ridge; dotted; dashed; inset; outset; groove e solid.

b)
id=Ii
style="Z-INDEX: -300; FILTER: alpha(opacity=60); WIDTH: 400px; HEIGHT: 500px"

O valor que está em roxo determina o grau de transparência do filtro. Quanto maior o valor menor a transparência e vice-versa.

c)
dim t,c,w,h,calto,canch,camba,si(401),going,birdvelo
going="right" 'here we say left or right for the panoram

Aqui você altera a direção do movimento do rolamento da imagem.  Opções: Right e Left.

d)
sub rollit
t=(t+1) mod w

Aqui, no número que está em vermelho, você altera a velocidade do rolamento da imagem.

13 - Ainda na abinha "Origem" e insira uma outra tabela para a colocação do texto. Para isso, coloque o cursor antes da tag </BODY></HTML> e cole o script abaixo:

Script para colocação de uma Tabela com Filto Opacity

<TABLE
style="BORDER-RIGHT: #4e6a99 5px ridge; BORDER-TOP: #4e6a99 5px ridge; FILTER: Alpha(Opacity=80); BORDER-LEFT: #4e6a99 5px ridge; BORDER-BOTTOM: #4e6a99 5px ridge"
borderColor=#ffffff cellSpacing=10 cellPadding=10 width="65%" align=center
bgColor=#687F9E border=7>
<TBODY>
<TR>
<TD borderColor=#4e6a99>&nbsp;</TD></TR></TBODY></TABLE>

14 - Altere os códigos desta tabela com os mesmos utilizados no item 12 - letra a).
15 - Volte para a abinha Editar. Você vai que a tabela agora inserida está sobre a imagem.  Para resolver isso, coloque o cursor na parte superior da mensagem (antes da nova tabela) e clique várias vezes em "Enter" até que ela se posicione um pouquinho abaixo da Imagem.
16 - Mais uma vez visualize sua formatação. Estando tudo certinho e a seu gosto, volte à abinha "Editar" e complete a formatação  com:
Borda colorida
Barra de rolagem colorida
Script para rodapé (Como sugestão, você poderá usar o script que está disponível em Scritp)
Texto
Música online
Assinatura ( opcional)

Se precisar de ajuda é só pedir que termos o maior prazer em ajudá-lo.






T02 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito Scrolling Image.
Texto
Borda Colorida
Barra de Rolagem Colorida
Script para Mensagem no Rodapé
Música
Assinatura (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - T02- Scrolling Image.
No corpo do e-mail coloque o link correspondente a esse tutorial, iserido numa imagem pequena como hiperlink.
Verificar o peso de sua mensagem.
Não esqueça do anti-banner

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

Esse  tutorial foi criado por Esmê em 12/04/2007, 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 da autora ou 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.