T09 Tabela Panorâmica - formatação adian

    
T09 Tabela Panorâmica

Vamos aqui também usar o método de substituição.

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.

Script Efeito Marqueé com Imagem Panorâmica

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Designs by Stationery Heaven</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3199" name=GENERATOR>
<STYLE>BODY {
BORDER-RIGHT: #000000 8px ridge; BORDER-TOP: #000000 8px ridge;
BORDER-LEFT: #000000 8px ridge; SCROLLBAR-ARROW-COLOR: #ffffff;
BORDER-BOTTOM: #000000 8px ridge; SCROLLBAR-BASE-COLOR: #000000
}
</STYLE>
</HEAD>
<BODY bgColor=#ffffff
background=inserir_bakground><BGSOUND balance=0
src="Caminho da Música" volume=0 loop=infinite>
<DIV><FONT color=#000000 size=4></FONT>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV><BR></DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV><!in the line under; user decides only the TOP and WIDTH of the
panoramic screen.. not so the height which is given by the main image height>
<DIV align=center><SPAN id=Li
style="BORDER-RIGHT: #000000 4px ridge; BORDER-TOP: #000000 4px ridge; Z-INDEX: -250; LEFT: 1px; BORDER-LEFT: #000000 4px ridge; WIDTH: 800px; BORDER-BOTTOM: #000000 4px ridge; POSITION: absolute; TOP: 20px; HEIGHT: 208px">
<SPAN
id=Mi
style="Z-INDEX: -300; LEFT: 0px; WIDTH: 1px; POSITION: absolute; TOP: 0px; HEIGHT: 1px"><IMG
id=Ii
style="Z-INDEX: -300; FILTER: alpha(opacity=90); WIDTH: 400px; HEIGHT: 200px"
src="Caminho da Imagem"></SPAN> </SPAN></SPAN>
<TABLE id=messagebox
style="BORDER-RIGHT: #000000 4px ridge; BORDER-TOP: #000000 4px ridge; Z-INDEX: -150; FILTER: alpha(opacity=80); LEFT: 1px; BORDER-LEFT: #000000 4px ridge; WIDTH: 500px; BORDER-BOTTOM: #000000 4px ridge; TOP: 255px; HEIGHT: 1px" borderColor=#000000 cellSpacing=3 cellPadding=10 align=center bgColor=#ffffff>
<TBODY>
<TR>
<TD vAlign=top><FONT face=Verdana color=#000000 size=3>
<CENTER>
<CENTER><FONT face="Trebuchet MS" color=#000000><BR></FONT></CENTER>
<CENTER>Texto Aqui</CENTER></FONT>
<P></P></CENTER></TD></TR></TBODY></TABLE>
<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
messagebox.style.overflow="hidden"

Mi.style.pixelheight=h
Mi.style.width=w*(n+1)

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
messagebox.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
dum=t-w : if going="LEFT" then dum=-t
Mi.style.left=dum


settimeout "rollit",32
end sub
</SCRIPT>

<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>

2 - Esse script é muito interessante, pois oferece opções para alterar a largura da janela onde o efeito se processa.  A única restrição é quanto a altura. Essa deve ter sempre 200px mais o dobro da largura das bordas.  No nosso exemplo as bordas tem 4px, então a altura terá 208px.

Veja no script o trecho:
style="BORDER-RIGHT: #000000 4px ridge; BORDER-TOP: #000000 4px ridge; Z-INDEX: -250; LEFT: 1px; BORDER-LEFT: #000000 4px ridge; WIDTH: 800px; BORDER-BOTTOM: #000000 4px ridge; POSITION: absolute; TOP: 20px; HEIGHT: 208px">
Aqui troca-se as cores das bordas da tabela que contem o efeito e a largura da mesma. Esta está determinada para 800px de largura e 208px de altura. TOP=20px determina a distância entre a janela e a borda superior da mensagem.

3 - A imagem principal também terá que ter 200px de altura. Já a largura pode variar, não importando o tamanho da janela, desde que seja informado no script o tamanho da imagem que está usando.  É imprescindível porém que seja aplicado um seamless horizontal para tirar as emendas. A imagem pode ter largura muito menor do que a estipulada para a tabela, e é inserida uma única vez, pois o script a preenche automaticamente.

Procure no script o trecho onde fazer essas alterações:
style="Z-INDEX: -300; FILTER: alpha(opacity=90); WIDTH: 400px; HEIGHT: 200px"
src="Caminho da Imagem"></SPAN> </SPAN></SPAN>
Em WIDTH: 400px, coloque a largura da sua imagem. Como já disse acima, a altura tem que ser 200px. Em Opacity=90 controla-se a transparência da imagem. Quanto menor o valor mais transparente se torna a imagem, e vice-versa.

4 - Agora vamos ver onde fica o código responsável pela Caixa de Texto.

Aqui você altera as cores das bordas, background, largura, (a altura é automática à medida que digita seu texto) e a Opacidade do background.
<TABLE id=messagebox
style="BORDER-RIGHT: #000000 4px ridge; BORDER-TOP: #000000 4px ridge; Z-INDEX: -150; FILTER: alpha(opacity=80); LEFT: 1px; BORDER-LEFT: #000000 4px ridge; WIDTH: 500px; BORDER-BOTTOM: #000000 4px ridge; TOP: 255px; HEIGHT: 1px" borderColor=#000000 cellSpacing=3 cellPadding=10 align=center bgColor=#ffffff>
Em WIDTH determina-se a largura que queremos para a Caixa de Texto.

5 - Neste trecho abaixo podem ser feitas as seguintes alterações:

sub rollit
t=(t+1) mod w 'the number is the speed of the panorama
dum=t-w : if going="LEFT" then dum=-t
Mi.style.left=dum
Em t=(t+1), alterando o valor aumenta-se a velocidade do movimento da imagem.
Em Going="LEFT" pode ser mudada a direção do movimento.  A outra opção é "RIGHT".

6 - Visualize sua mensagem e veja se está a seu gosto. Se necessário faça as correções.
7 - Vamos incrementar mais um pouco nossa formatação?  Sugiro abaixo um outro script que deverá ser inserido antes de </BODY></HTML> bem no final da origem. Ele permite a colocação de uma pequena gif no mouse.

Script Imagem no Mouse

<IMG id=curseur src="Caminho da Gif"
style="LEFT: 0px; POSITION: absolute; TOP: -9999px; Z-INDEX: +1">
<SCRIPT language=VBS>
dim x
sub document_onmousemove
curseur.style.top=window.event.clientY-32+document.body.scrolltop
curseur.style.left=window.event.clientX-32+document.body.scrollleft
end sub
</SCRIPT>

Se tiver dúvidas pergunte, pois teremos muito prazer em ajudá-lo.

T09 - Envie para o grupo dois e-mail formatados como foi ensinado nesse tutorial.

T09a - Tabela para a imagem com 600px de largura e caixa de texto com 400px de largura.

T09b - Tabela para a imagem com 850px de largura e caixa de texto com 600px de largura;

Eles deverão conter:

Script com o efeito Tabela com Efeito Marqueé Imagem Panorâmica.

Background

Imagem Seamless horizontal

Texto

Borda Colorida

Barra de Rolagem Colorida

Script para Mensagem no Rodapé

Script para Imagem no Mouse (opcional)

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 - T09a - Imagem Panorâmica;

Nome - T09b - Imagem Panorâmica;

Abaixo do texto e dentro da caixa de texto, coloque numa imagem pequena ou palavra um hiperlink com o endereço do tutorial.

Não esqueça o anti-banner. De preferência use um anti-banner transparente para não interferir na formatação.

 

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

Esse  tutorial foi elaborado e formatado por Esmê, em novembro de 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 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.