BO08 Imagens e Textos Múltiplos - formatação adian

    
BO08 Imagens e Textos Múltiplos
O efeito deste script é de várias imagens e textos se alternando no background. Vamos ver neste tutorial onde inseri-lo e também como complementá-lo.


1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem"
3 - Localize a frase <BODY bgColor=#ffffff>; delete-a e cole em seu lugar o script abaixo.

Imagens e Textos Múltiplos

<BODY id=bg bgColor=#ffffff>

<DIV> </DIV>

<STYLE>BODY {

BORDER-RIGHT: #000000 7px cume; BORDER-TOP: #000000 cume de 7px; BARRA DE ROLAGEM-FACE-COR: #000000; BARRA DE ROLAGEM-DESTAQUE-COR: #c0c0c0; BORDER-LEFT: #000000 cume de 7px; BARRA DE ROLAGEM-SOMBRA-COR: #c0c0c0; SCROLLBAR-3DLIGHT-COLOR: #ffffff; BARRA DE ROLAGEM-SETA-COR: #ffffff; BARRA DE ROLAGEM-TRACK-COR: #c0c0c0; BORDER-BOTTOM: #000000 cume de 7px; SCROLLBAR-DARKSHADOW-COLOR: #000000

}

.pic1 {

BORDER-RIGHT: #e6e4e4 cume de 5px; BORDER-TOP: #e6e4e4 cume de 5px; ESQUERDA: 5px; VISIBILIDADE: visível; BORDA-ESQUERDA: #e6e4e4 cume de 5px; BORDER-BOTTOM: #e6e4e4 cume de 5px; POSIÇÃO: absoluta; SUPERIOR: 5px

}

.box1 {

BORDER-RIGHT: #e6e4e4 5px cume; BORDER-TOP: #e6e4e4 cume de 5px; TAMANHO DA FONTE: 16pt ; BORDA-ESQUERDA: #e6e4e4 cume de 5px; COR: #e6e4e4 ; BORDER-BOTTOM: #e6e4e4 cume de 5px; FONTE-FAMÍLIA: Comic Sans MS ; COR DE FUNDO: #ffffff } .box2 { BORDER-RIGHT: #e6e4e4 5px ridge; BORDER-TOP: #e6e4e4 cume de 5px; TAMANHO DA FONTE: 16pt

; BORDA-ESQUERDA: #e6e4e4 cume de 5px; COR: #000000 ; BORDER-BOTTOM: #e6e4e4 cume de 5px; FONTE-FAMÍLIA: Comic Sans MS ; COR DE FUNDO: #ffffff

}

</STYLE>

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

<DIV> </DIV><!--COLOQUE SEUS FUNDOS AQUI--><IMG id=tabback1

style="ESQUERDA: -1800px; POSIÇÃO: absoluto; TOPO: -1800px" altura=150

src=" CAMINHO DO FUNDO 01 " largura=150> <IMG id=tabback2

style="ESQUERDA: -1800px; POSIÇÃO: absoluto; TOPO : -1800px"

CAMINHO DO FUNDO 02 " largura=150> <!---COLOQUE SUAS IMAGENS AQUI.....MANTENHA ELAS PEQUENAS....USE LARGURA E ALTURA---->

<DIV><IMG class=pic1 id=pic1

style="FILTRO: revelaçãoTrans; ESQUERDA: 10px; VISIBILIDADE: oculta; POSIÇÃO: absoluta; TOP: 10px"

height=320 src=" CAMINHO DA IMAGEM 01 " width=334></DIV>

<DIV><IMG class=pic1 id=pic2

style="FILTER: revelaTrans; ESQUERDA: 60px; VISIBILIDADE: oculta; POSIÇÃO: absoluta; TOP: 40px"

height=320 src=" CAMINHO DA IMAGEM 02 " width=334></DIV>

<

style="FILTER: revelarTrans; LEFT: 110px; VISIBILITY: oculto; POSIÇÃO: absoluto; TOP: 70px"

height=320 src=" CAMINHO DA IMAGEM 03 " width=334></DIV>

<DIV><IMG class=pic1 id=pic4

style="FILTER: revelaçãoTrans; ESQUERDA: 160px; VISIBILIDADE: oculta; POSIÇÃO: absoluta; SUPERIOR: 100px"

height=320 src=" CAMINHO DA IMAGEM 04 " width=334></DIV>

<DIV><IMG class=pic1 id=pic5

style="FILTER: revelarTrans; LEFT: 210px; VISIBILITY: oculto; POSIÇÃO: absoluto; TOP: 130px"

height=320 src="CAMINHO DA IMAGEM 05" width=334></DIV><!----COLOQUE AS MENSAGENS AQUI ...MANTENHA-AS CURTAS....LARGURA E TAMANHO DAS SUAS FOTOS---->

<DIV class=box1 id=box1

style=" FILTRO: revelaTrans; ESQUERDA: 393px; VISIBILIDADE: oculta; POSIÇÃO: absoluta; TOP: 40px"

width="334" height="320">

<CENTER>

<DIV class=box2> Primeiro texto aqui .</DIV></DIV>

<CENTER></CENTER>

<DIV class=box1 id= box2

style="FILTRO: revelaçãoTrans; ESQUERDA: 443px; VISIBILIDADE: oculta; POSIÇÃO: absoluta; SUPERIOR: 80px"

largura="323"

Segundo texto aqui .</DIV></DIV></CENTER>

<DIV class=box1 id=box3

style="FILTER: revelaTrans; LEFT: 493px; VISIBILITY: hidden; POSITION: absolute; TOP: 110px"

width=" 323" height="323">

<CENTER>

<DIV class=box2> Terceiro texto aqui. </DIV></DIV></CENTER>

<DIV class=box1 id=box4

style="FILTER: revelaTrans; ESQUERDA: 543px; VISIBILIDADE: oculto; POSIÇÃO: absoluto; SUPERIOR: 140px"

width="323" height= "323">

<CENTRO>

<classe DIV=box2> Quarto texto aqui. </DIV></DIV></CENTER>

<DIV class=box1 id=box5

style="FILTER: revelarTrans; LEFT: 593px; VISIBILITY: oculto; POSIÇÃO: absoluto; TOP: 170px"

width="323" height="323">

<CENTER>

<DIV class=box2 > Quinto texto aqui. </DIV></DIV></CENTER>

<SCRIPT language=vbscript>

'~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~

'Este roteiro escrito por: Diann ;o)

'© Di's Stationery Studio

'http://geocities.com/disstationery

'Data de criação: Junho de 2002

'Que seu anjo seja ao seu lado

'

bg.background=tabback1.src

Sub Window_OnLoad()

'Mude a mensagem do ticker aqui,

window.status=" MENSAGEM DE RODAPÉ AQUI "

SetTimeOut "diseech"

End Sub

Sub diseech()

ClearTimeOut

pic5.filters(0).Apply()

pic5. filtros(0). Transição=23

pic5.style.visibility="hidden"

pic5.filters(0).Play(5.000)

pic1.filters(0).Apply()

pic1.filters(0). Transição=3

pic1.style.visibility="visible"

pic1.filters(0).Play(5.000)

bg.background=tabback2.src

box5.filters(0).Apply()

box5.filters(0). Transição=17

box5.style.visibility="hidden"

box5.filters(0).Play(5.000)

box1.filters(0).Apply()

box1.filters(0). Transition=14

box1.style.visibility="visible"

box1.filters(0).Play(5.000)

SetTimeOut "diseech1", 10000

End Sub

Sub diseech1()

ClearTimeOut

pic1.filters(0).Apply()

pic1.filters( 0). Transition=20

pic1.style.visibility="hidden"

pic1.filters(0).Play(5.000)

pic2.filters(0).Apply()

pic2.filters(0).

pic2.style.visibility="visible"

pic2.filters(0).Play(5.000)

bg.background=tabback1.src

box2.filters(0).Apply()

box2.filters(0). Transição=10

box2.style.visibility="visible"

box2.filters(0).Play(5.000)

box1.filters(0).Apply()

box1.filters(0). Transition=6

box1.style.visibility="hidden"

box1.filters(0).Play(5.000)

SetTimeOut "diseech2", 10000

End Sub

Sub diseech2()

ClearTimeOut

pic2.filters(0).Apply()

pic2.filters( 0). Transição=22

pic2.style.visibility="hidden"

pic2.filters(0).Play(5.000)

pic3.filters(0).Apply()

pic3.filters(0). Transição=5

pic3.style.visibility="visible"

pic3.filters(0).Play(5.000)

bg.background=tabback2.src

box2.filters(0).Apply()

box2.filters(0). Transição=17

box2.style.visibility="hidden"

box2.filters(0).Play(5.000)

box3.filters(0).Apply()

box3.filters(0). Transition=21

box3.style.visibility="visible"

box3.filters(0).Play(5.000)

SetTimeOut "diseech3",

Sub diseech3()

ClearTimeOut

pic3.filters(0).Apply()

pic3.filters(0). Transição=21

pic3.style.visibility="hidden"

pic3.filters(0).Play(5.000)

pic4.filters(0).Apply()

pic4.filters(0). Transição=5

pic4.style.visibility="visible"

pic4.filters(0).Play(5.000)

bg.background=tabback1.src

box3.filters(0).Apply()

box3.filters(0). Transição=17

box3.style.visibility="hidden"

box3.filters(0).Play(5.000)

box4.filters(0).Apply()

box4.filters(0). Transição=21

box4.style.visibility="visible"

box4.filters(0).Play(5.000)

SetTimeOut "diseech4", 10000

End Sub

Sub diseech4()

ClearTimeOut

pic4.filters(0).Apply()

pic4.filters(0). Transição=21

pic4.style.visibility="hidden"

pic4.filters(0).Play(5.000)

pic5.filters(0).Apply()

pic5.filters(0). Transição=5

pic5.style.visibility="visible"

pic5.filters(0).Play(5.000)

bg.background=tabback2.src

box4.filters(0).Apply()

box4.filters(0). Transição=17

box4.style.visibility="hidden"

box4.filters(0).Play(5.000)

box5.filters(0).Apply()

box5.filters(0). Transition=4

box5.style.visibility="visible"

box5.filters(0).Play(5.000)

SetTimeOut "diseech", 10000

End Sub

</SCRIPT>

4 - Veremos agora as alterações a serem feitas no script.

1) - Localize no script os trechos nas cores abaixo indicados e troque os códigos das cores por outros que combinem com suas imagens e/ou backgrounds:
O trecho em vermelho é o responsável pela borda colorida do email e da barra de rolagem.
O trecho em azul, responsável pelas bordas das imagens.
O trecho em verde é o responsável pelas cores das bordas externas das caixas de texto; O que está em laranja corresponde à cor do texto e o tipo e tamanho da fonte.
O trecho em rosa é o responsável pelas cores das bordas internas das caixas de texto; O que está em laranja corresponde à cor do texto e o tipo e tamanho da fonte.

5 - Após colado o script na Origem, insira os Backgrounds colando os endereços capturados no lugar indicado. (Se necessário, veja no item 6 do tutorial CI02 como capturar o caminho da imagem.)
6 - Em seguida insira as 5 imagens colando os endereços capturados nos lugares indicados. (Se necessário, veja no item 6 do tutorial CI02 como capturar o caminho da imagem.)
7 - Após inseridos os backgrounds e as imagens, clique em visualizar e verifique os efeitos. Se tudo estiver certinho, vamos inserir os textos.
8 - Escolha textos curtos. Você pode digitá-los na abinha "Editar", mas como ficam sobrepostos, fica difícil sua visualização.   Eu prefiro digitá-los no Bloco de Notas, copiá-los e depois colar na origem nos lugares indicados.
Se precisar ou quiser dividir uma linha, basta digitar antes da palavra que quiser passar para a outra linha a tag <BR> 

Ex: Se o que você está fazendo for engraçado, não há <BR>necessidade de ser engraçado para fazê-lo. <BR>Charles Chaplin.
9  - Digite sua mensagem de rodapé no local indicado e prontinho... Visualize e veja como ficou.
10 - Estando tudo do seu agrado agora é só finalizar inserindo uma bela música.
Qualquer dúvida é só perguntar. Teremos o maior prazer em ajudar.





BO08 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito imagens e textos múltiplos
2 Backgrounds (patterns)
5 Imagens  jpg com 334 x 320 px
5 Textos pequenos.
Música
Assinatura (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - BO08 - Imagens e Textos Múltiplos.
No corpo do e-mail coloque o endereço deste tutorial, como hiperlink em uma imagem (gif) pequena ou palavra.
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 junho\2007, especialmente para o Grupo PSP Brasil.

É expressamente proibida, por lei, a desta página em outro site ou outro modo de veiculação sem um autor expresso da autora ou dos detentores de direitos autorais do texto da formatação e dos demais elementos que determinam a página. 

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