T04 Tabela com Imagem em Transição - formatação adian

    

T04 Tabela com Imagem em Transição

Neste tutorial veremos um script com efeito  sobre uma imagem dentro de uma tabela. O efeito é muito bonito e interessante

1 - Escolha uma imagem, que será a que usaremos para o script. Se preferir crie uma frame com ela.

Ex: Minha Imagem

PS: esse exemplo é meramente ilustrativo crie sua própria imagem e back

2 - Com a mesma imagem ou pedacinho dela, crie um back apenas usando seamless Tiling.

Ex: Meu back

 

Para usar esse script o mais prático é o processo de substituição do código e posteriormente complementaremos a formatação

1 - Abra uma nova mensagem.

2 - Clique na abinha "Origem"

3 - Delete todo o código existente e cole em seu lugar o código abaixo: 

Script Tabela x Imagem em Transição

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<META content="MSHTML 6.00.2900.3086" name=GENERATOR>

<STYLE>BODY {

BACKGROUND-POSITION: left top; MARGIN-TOP: 0px; FONT-SIZE: 10pt; MARGIN-LEFT: 50px; COLOR: #000000; BACKGROUND-REPEAT: repeat; FONT-FAMILY: Accent DB

}

</STYLE>

<STYLE>BODY {

SCROLLBAR-BASE-COLOR: #6272bd

}

</STYLE>

</HEAD>

<BODY bgColor=#ffffff background=Insira o Background>

<DIV>&nbsp;</DIV>

<DIV style="FONT: 10pt arial"></DIV>

<CENTER>

<TABLE borderColor=#000000 height=300 cellSpacing=3 cellPadding=3

bgColor=#6272bd borderColorLight=#6272bd border=4>

<TBODY>

<TR><!--Insert Height and Width of Image Here-->

<TD vAlign=center align=middle width=321 height=462><!--Transition Image Goes Here--><IMG id=revealpict

style="FILTER: revealTrans(duration=5, transition=10); VISIBILITY: hidden"

height=462 src="CAMINHO DA IMAGEM" width=321>

<SCRIPT language=JavaScript>

var rpic1;

var rpic2;

function revealgo() {

rpic1 = revealpict;

rpic1.filters.revealTrans.Apply();

rpic1.style.visibility = "visible";

rpic1.filters.revealTrans.Play();

setTimeout('doIt()', 10000);

} function doIt() {

rpic2 = revealpict

rpic2.filters.revealTrans.Apply();

rpic2.style.visibility = "hidden";

rpic2.filters.revealTrans.Play();

setTimeout('revealgo()', 10000);

} window.onload=revealgo

</SCRIPT>

<CENTER></CENTER><!--Adjust Width of Text Block Here, play around with number to make wider or smaller--></TD>

<TD width=300>

<P align=center><FONT face="Comic Sans MS"></FONT></P>

<P align=center>&nbsp;<STRONG>ESCREVA AQUI SEU

TEXTO</STRONG></P></TD></TR></TBODY></TABLE></CENTER>

<P>

<P></P>

<SCRIPT language=VBScript>

'This script is written

'by YRJA - 2002

'- - - - - - - - - -

Dim sch, scw, pict, picl, cct, ccl, R, A, timoutHandle

R=100

A=0

Sub Window_OnLoad

on error resume next

window.status=" ::Escreva aqui sua mensagem de rodapé:: "

scw=document.body.clientWidth

sch=document.body.clientHeight

cct=(sch/2)

ccl=(scw/2)

pic.style.Top=pict

pic.style.Left=picl

circle

End Sub

Sub circle()

ClearTimeOut(timoutHandle)

A=A+0.05

picl=(R*cos(A)+200)

pict=(R*sin(A)+150)

pic.style.Left=picl

pic.style.Top=pict

if A>6.28 then timoutHandle=SetTimeOut ("reset", 30) else timoutHandle=SetTimeOut ("circle", 30)

End Sub

Sub reset()

ClearTimeOut(timoutHandle)

A=0

circle

End Sub

Sub Window_OnResize()

Window_OnLoad

End Sub

</SCRIPT>

</BODY></HTML>

Parâmetros

Os códigos que estão destacados em roxo, são os responsáveis pela barra de rolagem colorida

 

Os códigos em verde limão são referentes a tabela

<TABLE borderColor=#000000 height=300 cellSpacing=3 cellPadding=3  bgColor=#6272bd borderColorLight=#6272bd border=4>

Vc poderá alterar a cor do fundo da tabela em:  bgColor=#6272bd

A cor das borda da tabela em: borderColor=#000000  e borderColorLight=#6272bd  com tbm sua largura em border= 4

Em azul está destacado as medidas da imagem , altere esse valor para a medida de sua imagem.

Em rosa está destacado a velocidade e a transição do efeito.

4 - Após colado o script na Origem, volte à abainha "Editar" e insira o Background através de: Formatar/Plano de fundo/Imagem.

5 - Em seguida insira a imagem principal   colando o endereço capturado no lugar indicado.

6 - Mude códigos destacados, lembrando que ao trocá-los, você deverá escolher uma cor que combine com seu background ou imagem principal.

7 - Após todas as alterações terem sido feitas, cheque o resultado clicando na abinha "Visualizar".

T04 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.

Ele deverá conter:

Script com o efeito tabela x Imagem em transição

Texto

Música

Assinatura (opcional)

 

Não esqueça, por favor:

Colocar no assunto: seu nome ou nick - T04 - Tabela x Imagem em Transição

No corpo do e-mail coloque o link correspondente a esse tutorial inserido como hiperlink numa imagem pequena ou palavra.

Verificar o peso de sua mensagem.

Não esqueça do anti-banner

/div>

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

Esse  tutorial foi criado por brisa® em maio 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 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.