IM08 Imagem Zoom - formatação adian

    

IM08 Imagem Zoom

Esse tutorial oferece o script categoria imagem, com movimento zoom. Há também um efeito vertical (ou horizontal) na transição da tabela de texto para a imagem.

Para a formatação desse script você necessitará de uma pattern de aproximadamente 200x200 para o Background e de uma imagem com moldura de 500x600. Você deverá criar seu próprio material.

1 - Abra uma nova mensagem no Outlook.
2 - Insira o Background pela Abinha Editar em Formatar > Plano de Fundo > Imagem.
2 - Clique na Abinha "Origem".
3 - Localize a tag de fechamento do email </BODY></HTML>, coloque o cursor antes dela e clique Enter. Copie o script abaixo, e cole antes de  </BODY></HTML>.

Script Imagem Zoom

<STYLE type=text/css>BODY {
BORDER-RIGHT: #839170 5px ridge; BACKGROUND-POSITION: left top; BORDER-TOP: #839170 5px ridge; BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #839170 5px ridge; SCROLLBAR-ARROW-COLOR: #839170; BORDER-BOTTOM: #839170 5px ridge; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #b8867d; BACKGROUND-COLOR: #324552; TEXT-ALIGN: center
}
IMG.pn1 {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
DIV.bz1 {
BORDER-RIGHT: #b8867d 5px ridge; PADDING-RIGHT: 20px; BORDER-TOP: #b8867d 5px ridge; PADDING-LEFT: 20px; FONT-WEIGHT: bold; FONT-SIZE: 14pt; LEFT: 10px; VISIBILITY: hidden; PADDING-BOTTOM: 20px; OVERFLOW: auto; BORDER-LEFT: #b8867d 5px ridge; WIDTH: 70%; COLOR: #536a32; PADDING-TOP: 20px; BORDER-BOTTOM: #b8867d 5px ridge; FONT-FAMILY: "Papyrus"; SCROLLBAR-BASE-COLOR: #839170; POSITION: absolute; TOP: 10px; HEIGHT: 70%; BACKGROUND-COLOR: #b8867d
}
</STYLE>
<IMG class=pn1 id=zic1
height=501 src="CAMINHO DA IMAGEM" width=610> <!--messagebox-->
<DIV class=bz1 id=mz1>
<DIV>&nbsp;</DIV>
<FONT color=#ff0000>TEXTO AQUI</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV></DIV>
<SCRIPT language=VBScript>
Option Explicit
SetLocale("en-au")
dim dz, ez, docw, doch, endW, endH, stW, stH, fullW, fullH, c1W, c2W, c1H, c2H, inc1W, inc1H, inc2W, inc2H, speed

ez=" Digite aqui sua 1ª Mensagem do Rodapé "
zic1.style.filter="progid:DXImageTransform.Microsoft.RandomBars(duration=5, enabled=1, orientation=vertical)"
mz1.style.filter="progid:DXImageTransform.Microsoft.RandomBars(duration=5, enabled=1, orientation=vertical)"

'------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'------------------------------------------
'Script written by DorothyIrene
'© DorothyIrene Designs March 2005
'You are welcome to use this script but
'please do not remove these credits
'this script is encoded and can be traced
'------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'------------------------------------------

'=============================================
'===== changes and user settings section ===========

'place your ticker message between the quotes
window.status=dz&ez&"Digite a 2ª Mensagem do Rodapé "

'set start and end width & height
stW=10
stH=10
endW=10
endH=10

'set speed of animation (note lower numbers make faster growth)
speed=30

'===========end of changes and user settings section
'==================================================

fullW=zic1.width
fullH=zic1.height
inc1W=2
inc1H=2
c1W=fullW
c1H=fullH
inc2W=2
inc2H=2
c2W=stW
c2H=stH

REM everything starts here
sub window_onload()
docw=document.body.clientWidth
doch=document.body.clientHeight
zic1.style.height=c1H
zic1.style.width=c1W
mz1.style.height=c2H
mz1.style.width=c2W
zic1.style.left=(docw-c1W)/2
zic1.style.top=(doch-c1H)/2
mz1.style.left=(docw-c2W)/2
mz1.style.top=(doch-c2H)/2
window.setTimeout "shrinkIt", 3000
z15
end sub

sub shrinkIt()
c1W=c1W-inc1W
c1H=c1H-inc1H
if c1W<=endW then
c1W=endW
inc1W=0
end if
if c1H<=endH then
c1H=endH
inc1H=0
end if
zic1.style.height=c1H
zic1.style.width=c1W
zic1.style.left=(docw-c1W)/2
zic1.style.top=(doch-c1H)/2
if c1W>endW or c1H>endH then
window.setTimeout "shrinkIt",speed
else
c2W=stW
c2H=stH
inc2W=5
inc2H=5
window.setTimeout "growIt",500
end if
end sub

sub growIt()
zic1.style.visibility="hidden"
c2W=c2W+inc2W
c2H=c2H+inc2H
if c2W>=fullW then
c2W=fullW
inc2W=0
end if
if c2H>=fullH then
c2H=fullH
inc2H=0
end if
mz1.style.height=c2H
mz1.style.width=c2W
mz1.style.left=(docw-c2W)/2
mz1.style.top=(doch-c2H)/2
mz1.style.visibility="visible"
if c2W<fullW or c2H<fullH then
window.setTimeout "growIt",speed
else
c1W=fullW
c1H=fullH
inc1W=5
inc1H=5
zic1.style.width=c1W
zic1.style.height=c1H
zic1.style.left=(docw-c1W)/2
zic1.style.top=(doch-c1H)/2
window.setTimeout "dorothy",9000
end if
end sub

sub dorothy()
mz1.filters(0).apply()
mz1.style.visibility="hidden"
mz1.filters(0).play(4.000)
zic1.filters(0).apply()
zic1.style.visibility="visible"
zic1.filters(0).play(4.000)
window.setTimeout "shrinkIt",8000
end sub

sub z15()
'important do not remove this
end sub

sub window_onresize()
docw=document.body.clientWidth
doch=document.body.clientHeight
zic1.style.left=(docw-c1W)/2
zic1.style.top=(doch-c1H)/2
mz1.style.left=(docw-c2W)/2
mz1.style.top=(doch-c2H)/2
end sub
</SCRIPT>

4 - Vamos inserir a Imagem Principal.
  IMPORTANTE: Antes de inserir sua imagem verifique sua largura e altura e anote, pois vai precisar desses valores mais tarde para incluir no script.
5 - Clique na "Abinha Editar" e depois em Inserir Imagem  e vá buscar o caminho da sua imagem. Navegue até a pastinha onde suas imagens estão salvas, clique em abrir.  Aparecerá o caminho:

6 - 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.
7 - Nessa janelinha clique em Cancelar.
8 - Clique na abinha "Origem" e procure no script a frase: "CAMINHO DA IMAGEM".  Selecione-o, apague e cole (CTRL + V)  o endereço.
9 - Após colocada a imagem, vamos ajustar seu tamanho: Procure na Origem  o trecho abaixo:

<IMG class=pn1 id=zic1
height=501 src="CAMINHO DA IMAGEM" width=610>

Em height=... coloque o valor da altura de sua imagem;
Em width=... coloque o valor da largura de sua imagem;

10 - Clique na aba  "Visualizar"  para checar o resultado.
11 - 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 Principal e a Caixa de Texto, devem combinar com essa imagem.

Vamos ver as alterações que podem ser feitas no script:

Localize o trecho:

a) Este trecho do script é o responsável pelas bordas do email e barra de rolagem colorida:

BORDER-RIGHT: #839170 5px ridge; BACKGROUND-POSITION: left top; BORDER-TOP: #839170 5px ridge; BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #839170 5px ridge; SCROLLBAR-ARROW-COLOR: #839170; BORDER-BOTTOM: #839170 5px ridge; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #b8867d; BACKGROUND-COLOR: #324552; TEXT-ALIGN: center

Os códigos que estão em verde são os responsáveis pela cor das bordas do email. Essa cor deve combinar com a imagem e o back usados. De preferência um tom escuro.
Os códigos que estão em azul são os responsáveis pela largura das bordas do email.
Os códigos que estão em laranja são os responsáveis pelo estilo das bordas do email. Os estilos são os seguinte: double; ridge; dotted; dashed; inset; outset; groove e solid.
O código que estão em roxo é o responsável pela cor do background.

b) Este trecho do script é o responsável pelas bordas; barra de rolagem e background da tabela que contem o texto:

DIV.bz1 {
BORDER-RIGHT: #b8867d 5px ridge; PADDING-RIGHT: 20px; BORDER-TOP: #b8867d 5px ridge; PADDING-LEFT: 20px; FONT-WEIGHT: bold; FONT-SIZE: 14pt; LEFT: 10px; VISIBILITY: hidden; PADDING-BOTTOM: 20px; OVERFLOW: auto; BORDER-LEFT: #b8867d 5px ridge; WIDTH: 70%; COLOR: #536a32; PADDING-TOP: 20px; BORDER-BOTTOM: #b8867d 5px ridge; FONT-FAMILY: "Papyrus"; SCROLLBAR-BASE-COLOR: #839170; POSITION: absolute; TOP: 10px; HEIGHT: 70%; BACKGROUND-COLOR: #b8867d

Os códigos que estão em verde são os responsáveis pela cor das bordas da tabela que contém o texto. Essa cor deve combinar com a imagem e o back usados. De preferência um tom escuro.
Os códigos que estão em vermelho são os responsáveis pela cor da barra de rolagem da tabela do texto.
Os códigos que estão em azul são os responsáveis pela largura das bordas da tabela do texto.
Os códigos 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.
O código que estão em roxo é o responsável pela cor do background.

c)
<FONT color=#ff0000>TEXTO AQUI</DIV>

O código que está em marrom é o responsável pela cor da fonte.

d)
zic1.style.filter="progid:DXImageTransform.Microsoft.RandomBars(duration=5, enabled=1, orientation=vertical)"
mz1.style.filter="progid:DXImageTransform.Microsoft.RandomBars(duration=5, enabled=1, orientation=vertical)"

Aqui, em verde, você altera o sentido do efeito na transição da tabela de texto para a imagem. Esse efeito pode ser vertical ou horizontal.

e)
'set speed of animation (note lower numbers make faster growth)
speed=30

O valor que está em vermelho altera a velocidade do zoom da imagem. Quanto maior o valor mais lento o efeito e vice-versa.

12 - Este script já tem inserida uma mensagem de rodapé dupla. Procure as frases: "Digite aqui sua 1ª Mensagem do Rodapé"  e 'Digite aqui sua 2ª Mensagem do Rodapé"  e coloque as suas.

 13 - Visualize sua formatação. Estando tudo certinho e a seu gosto, volte à abinha "Editar" e complete a formatação.
Se tiver dúvidas pergunte que teremos muito prazer em ajudá-lo.

IM08 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito Imagem Zoom.
Background
Imagem
Texto
Borda Colorida (já incluída no script)
Barra de Rolagem Colorida (já incluída no script)
Mensagem de Rodapé (dupla: já incluída no script)
Música On-line
Assinatura (opcional)

Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - IM08 - Imagem: Efeito Zoom
Na parte inferior  do e-mail coloque uma imagem pequena e insira o endereço deste tutorial 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 22?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.