PU01 Pop-Up01 - formatação adian

    

PU01 Pop-Up01

O script que veremos aqui tem um efeito Pop-Up para o texto quando se clica em abrir.  Para voltar a imagem clique clica-se em Fechar. Espero que aprovem.


1 - Primeiro passo é criar a tag. Crie uma ao seu gosto mas terá que ter o tamanho de 800x 550pixels.
2 - Crie também um background para combinar com sua tag.
3 - Criado o material abra o  Outlook, para que o código seja inserido.

O código vai ser inserido na abinha "Origem" do Outlook. Vamos usar aqui o processo de substituição do código e sua posterior complementação.
4 - Para que ele seja inserido. Delete todo o código existente e cole em seu lugar o código abaixo:

Script -  Pop-Up

<!-- saved from url=(0022)http://internet.e-mail -->
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>lisinne-script</title>
<!--script written by Annem@rie-->
<!--Nodig 1 hoofdplaatje en wma/asf muziek/Needed 1 mainpicture, background-->
<!--hieronder kunnen de kleuren van de scrollbar, borders en tekst aangepast worden-->

<style type=text/css>body {
border: #CCD1D7 1px solid;
scrollbar-face-color: #000000;
scrollbar-base-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #CCD1D7;
scrollbar-3dlight-color: #CCD1D7;
}
.offscr {
left: -1800px; position: absolute; top: -1800px
}
.pl {
left: -1800px; position: absolute; top: -1800px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Checkerboard(squaresX=20,squaresY=2, direction='up',
duration=5)shadow(color=#CCD1D7, direction=150, strength=15)
}
.tab1 {
background-color: #CCD1D7;
left: -1800px; position: absolute; top: -1800px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Wheel(spokes=20, enabled=1)
}
.tab2 {
background-color: #000000;
left: -1800px; position: absolute; top: -1800px;
}
.knop {
border: #CCD1D7 1px solid;
left: -1800px;
position: absolute;
top: -1800px;
visibility: hidden;
font-family: verdana;
font-size: 12pt;
color: #CCD1D7;
background-color: #000000;
filter: alpha(opacity=55);
z-index: 2;
cursor: hand;
height: 30px;
width: 100px
}
.tekst {
border: #CCD1D7 1px solid;
padding: 50px;
position: absolute;
top: 5%;
left: 5%;
height: 90%;
width: 90%;
visibility: hidden;
font-family: verdana;
font-weight: normal;
font-size: 14pt;
filter: alpha(opacity=75);
color: #CCD1D7;
text-align: center;
background-color: #000000;
overflow: auto;
}
A:link {
font-size: 11pt; color: #CCD1D7; font-family: verdana;
}
A:visited {
font-size: 11pt; color: #CCD1D7; font-family: verdana;
}
A:active {
font-size: 11pt; color: #CCD1D7; font-family: verdana;
}
</style>
</head>

<!--achtergrondkleur aanpassen/set backgroundcolor-->
<body bgColor=#000000>

<div class=tab1 id=l1></div>
<div class=tab2 id=l2></div>
<div class=tab2 id=l3></div>
<div class=tab2 id=l4></div>
<div class=tab2 id=l5></div>
<div class=tab2 id=l6></div>
<div class=tab2 id=l7></div>

<!--hoofdplaatje, maat vermelden/main image, set width and height-->
<img class=pl id=pic
src="CAMINHO DA IMAGEM" width=800 height=550>

<button class=knop id=but1 hideFocus
height="30" width="100">FECHAR</button>

<button class=knop id=but2 hideFocus
height="30" width="100">ABRIR</button>

<div class=tekst id=txt>
<div>ESCREVA SEU TEXTO AQUI . . . .

</div></div>

<div class=offscr id=faux></div>

<script language=VBScript>
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'maart 2007
'please leave these lines in
'---------------------------

option explicit
setLocale("en-gb")

dim docw,doch,gap,sp,sp1,sp2,pl,th1

'-------------------------------gebruikersinstellingen-------------------------------------


window.status="ESCREVA SEU NOME AQUI"

'ruimte om plaatje
sp=25

'breedte tabel
sp1=10

'breedte dunne-lijntjes
sp2=1

'------------------------einde gebruikersinstellingen-------------------------------------

sub window_onLoad()
size_and_position
settimeout "gaan" ,500
end sub

sub size_and_position()
On Error Resume Next
docw=document.body.clientWidth
doch=document.body.clientHeight
if doch>(pic.height+sp1*2) then
gap=(doch-(pic.height+sp1*2))/2
document.body.scroll="no"
else
gap=sp
document.body.scroll="yes"
end if
but1.style.left=docw/2-50
but1.style.top=gap+pic.height-22
but1.style.width=100
but1.style.height=30
but2.style.left=docw/2-50
but2.style.top=gap+pic.height-22
but2.style.width=100
but2.style.height=30
txt.style.top=gap+sp1+sp/2
txt.style.left=(docw-pic.width)/2+sp/2
txt.style.height=pic.height-sp
txt.style.width=pic.width-sp
pic.style.top=gap+sp1
pic.style.left=(docw-pic.width)/2
pic.style.height=pic.height
pic.style.width=pic.width
l1.style.top=gap
l1.style.left=(docw-(pic.width+sp1*8+sp2*6))/2
l1.style.height=pic.height+sp1*2
l1.style.width=pic.width+sp1*8+sp2*6
l2.style.top=gap+sp1
l2.style.left=(docw-pic.width)/2-(sp2+sp1)
l2.style.height=pic.height
l2.style.width=sp2
l3.style.top=gap+sp1
l3.style.left=(docw-pic.width)/2-(sp2*2+sp1*2)
l3.style.height=pic.height
l3.style.width=sp2
l4.style.top=gap+sp1
l4.style.left=(docw-pic.width)/2-(sp2*3+sp1*3)
l4.style.height=pic.height
l4.style.width=sp2
l5.style.top=gap+sp1
l5.style.left=(docw+pic.width+sp1*2)/2
l5.style.height=pic.height
l5.style.width=sp2
l6.style.top=gap+sp1
l6.style.left=(docw+pic.width+sp1*2)/2+(sp2+sp1)
l6.style.height=pic.height
l6.style.width=sp2
l7.style.top=gap+sp1
l7.style.left=(docw+pic.width+sp1*2)/2+(sp2*2+sp1*2)
l7.style.height=pic.height
l7.style.width=sp2
faux.style.top=pic.height+sp1*2+sp
faux.style.left=sp
faux.style.height=sp
faux.style.width=docw
end sub

Sub gaan()
ClearTimeOut
pic.filters(0).Apply()
pic.style.visibility="visible"
pic.filters(0).Play(7.000)
window.setTimeout "gaan2" ,7000
End Sub

Sub gaan2()
ClearTimeOut
l1.filters(0).Apply()
l1.style.visibility="visible"
l1.filters(0).Play(7.000)
End Sub

window.setTimeout "show", 7500

sub show()
but2.style.visibility="visible"
end sub
sub but2_onclick()
txt.style.visibility="visible"
but1.style.visibility="visible"
but2.style.visibility="hidden"
end sub
sub but1_onclick()
txt.style.visibility="hidden"
but1.style.visibility="hidden"
but2.style.visibility="visible"
end sub

sub window_onresize()
size_and_position
end sub

</script>

</body></html>

Observe as substituições:

Os códigos que estão destacados em vermelho, são os responsáveis pelas cores da bordas do e-mail e da barra de rolagem.

Os códigos em azul são referentes aos do botões que abre o texto e fecha o texto. Se quiser trocar as as palavras dos botões. Basta apagar e escrever outra no lugar. Apenas tenha o cuidado para que a palavra fique entre aspas.

Em roxo está destacado o código da cor responsável pela sombra (shadow na imagem)

Em azul claro está destacado o código responsável para alterar a cor do efeito em volta da imagem. Para alterar basta substituir o código da cor pelo código da cor que sua preferência.

Em verde escuro está destacado o código responsável para alterar a cor das 3 linhas laterais que estão ao lado da imagem

Os códigos que estão destacados em verde limão, corresponde ao script do rodapé.

Está destacado em laranja o caminho da imagem principal. é lá que vai colar o caminho da tag que vc criou

Em amarelo está destacado o código responsável para alterar a cor do fundo da caixa de texto

5 - Feitas todas as alterações vá em Editar e verifique se estão ao seu gosto. Estando tudo certinho dê um duplo clique na caixa de texto. Digite aí sua mensagem. Se  for copiar e colar, não esqueça de colá-lo antes no bloco de notas.
6 - Complemente sua formatação:
Para colocar o Background use o caminho: Formatar/ Plano de fundo/Imagem
Para escrever o texto. Basta colocar na abinha "Editar" . Dar dois cliques com o botão esquerdo do mouse, que a caixa de texto irá se abrir.. Apague o texto" Escreva aqui seu texto" e coloque o seu.
Insira ainda uma bela música. Pelo caminho: Formatar/ Plano de fundo/ Imagem.

Com certeza o resultado será compensador

bom estudo !

beijos

brisa®

PU01 - Envie um e-mail com sua linda formatação personalizada:
Ele deverá conter:
Script  Pop-Up
Background combinando com a tag
Uma tag com as medidas de 800 x550 pixels
Texto
Música




Não esqueça, por favor:
De criar seu próprio material
Colocar no assunto: seu nome ou nick -PU01-  Pop-Up
Colocar no corpo do e-mail 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

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

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