BO10 Pop-Up - formatação adian

    

BO10 Pop-Up

O script que veremos aqui tem um efeito pop-up para a imagem quando se clica em abrir.  Para voltar ao texto clica-se em Fechar. Espero que gostem.

Vamos usar aqui o processo de substituição do código e sua posterior complementaçã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 Background Pop-Up

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Original Script by EVP</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16525" name=GENERATOR>
<STYLE>BODY {
BORDER-RIGHT: #000000 5px inset; BORDER-TOP: #000000 5px outset; SCROLLBAR-FACE-COLOR: #000000; BORDER-LEFT: #000000 5px outset; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: #000000 5px inset; SCROLLBAR-BASE-COLOR: #000000; BACKGROUND-COLOR: #ffffff
}
</STYLE>
</HEAD>
<BODY bgColor=#ffffff background=INSERIR_BACKGROUND scroll=no
onload=doIt()><BGSOUND balance=0 src="ENDEREÇO DA MÚSICA" volume=0
loop=infinite><!-- Button to open Pop-up --><BUTTON title=abrir
style="BORDER-RIGHT: #000000 2px inset; BORDER-TOP: #000000 2px outset; FONT-WEIGHT: bold; FONT-SIZE: 12pt; Z-INDEX: 100; BACKGROUND: #ffffff; LEFT: 20px; BORDER-LEFT: #000000 2px outset; WIDTH: 80px; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #000000 2px inset; FONT-FAMILY: Verdana; POSITION: absolute; TOP: 20px; HEIGHT: 30px"
onclick=parent.doPop() align="center">Abrir</BUTTON>
<DIV id=T1
style="BORDER-RIGHT: #000000 5px double; PADDING-RIGHT: 10px; BORDER-TOP: #000000 5px double; PADDING-LEFT: 10px; SCROLLBAR-FACE-COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12pt; Z-INDEX: 300; LEFT: 22.5%; PADDING-BOTTOM: 10px; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto; BORDER-LEFT: #000000 5px double; WIDTH: 55%; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; PADDING-TOP: 10px; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: #000000 5px double; FONT-FAMILY: Verdana; SCROLLBAR-DARKSHADOW-COLOR: #000000; POSITION: absolute; TOP: 8.77%; HEIGHT: 76.51%; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center">
<DIV>Texto Aqui</DIV>
<DIV id=src style="DISPLAY: none">
<STYLE id=PopupStyle></STYLE>

<DIV id=container
style="LEFT: -1800px; OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; TOP: -1800px; HEIGHT: 100%"><!-- Enter Actual Image Width and Height in the Image style --><IMG
id=bkg
style="Z-INDEX: -10; LEFT: -7px; WIDTH: 600px; POSITION: absolute; TOP: -7px; HEIGHT: 450px"
src="ENDEREÇO DA IMAGEM PRINCIPAL"> <SPAN id=haze
style="FILTER: Alpha(Opacity=70); LEFT: 0px; WIDTH: 600px; POSITION: absolute; TOP: 0px; HEIGHT: 450px"></SPAN></DIV><!-- Non-funtioning out of focus button, to remove ugly rims on visible close-button --><BUTTON
id=noFocus style="POSITION: absolute; TOP: -3000px"></BUTTON><BUTTON
title=fechar
style="BORDER-RIGHT: #000000 2px ridge; BORDER-TOP: #000000 2px ridge; FONT-WEIGHT: bold; FONT-SIZE: 13pt; Z-INDEX: 100; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 10%; BORDER-LEFT: #000000 2px ridge; CURSOR: hand; COLOR: #000000; BOTTOM: 2.5%; BORDER-BOTTOM: #000000 2px ridge; FONT-FAMILY: Verdana; POSITION: absolute"
onclick=parent.objPopup.hide() align="center">Fechar</BUTTON></DIV>
<DIV></DIV><!-- Dust image --><IMG id=fog
style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="ENDEREÇO DA GIF_FLOATIE AQUI">
<SCRIPT language=JavaScript>
// ---------------------------------------------------------
// Version OE5.5 Plein Ecran -
// auguste 2000 - Gerard Ferrandez
// Original Script by EVP....Jan\20\2001
// Modified to FS Pop up June\4\2001
// EVP
// ---------------------------------------------------------

nx=window.parent.screen.width
ny=window.parent.screen.height
objPopup=window.createPopup();
objPopupBody=objPopup.document.body;
objPopupBody.style.border="#000000 4px solid"
objPopupBody.style.backgroundColor="#FFFFFF"
//objPopupBody.style.backgroundImage="URL("+bkg2.src+")";
objPopupBody.innerHTML="<div style='display:none'>"+PopupStyle.innerHTML+"</div>"+src.innerHTML



x=-100000
y=-100000

buttonHeight=25

js=objPopupBody.all

// *** Enter the height of the text area in pixels ***
tH=0

function doPop() {
objPopup.show(nx/2-bkg.style.posWidth/2,ny/2-(bkg.style.posHeight+tH)/2,bkg.style.posWidth,bkg.style.posHeight+tH)
}

function doIt() {

js.container.style.left=0
js.container.style.top=0
js.container.style.height=bkg.style.posHeight
js.haze.style.backgroundImage="URL("+fog.src+")"
moveIt()
}

function moveIt() {
x=x
y=y+1
js.haze.style.backgroundPosition=x+" "+y
setTimeout("moveIt()",1)
}

</SCRIPT>
</DIV></BODY></HTML>

4 - Após colado o script na Origem, volte à abinha "Editar" e insira o Background através de: Formatar/Plano de fundo/Imagem.
5 - Em seguida insira a imagem principal e a gif_floatie colando os endereços capturados nos lugares indicados. (Se necessário, veja no item 6 do tutorial CI02 como capturar o caminho da imagem.)

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

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

Os códigos em rosa são referentes às bordas do botão que abre a imagem.

Os códigos que estão destacados em verde limão, alteram os itens da Caixa de texto: as cores da barra de rolagem; tipo, tamanho e cor da fonte; cor do background.

Os códigos em verde escuro são referentes às bordas do botão que fecha a imagem.

objPopupBody.style.border="#000000 4px solid"
objPopupBody.style.backgroundColor="#FFFFFF"
Aqui, neste trecho, os códigos em laranja alteram as cores das bordas e do background da imagem. Se quiser, também pode alterar sua largura e tipo.

7 - 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.
8 - Complemente sua formatação inserindo um script para a mensagem de rodapé  (sugestão abaixo) e uma bela música.

Sugestão de Mensagem de Rodapé

<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 = " ****** GRUPO_PSPBRASIL - FORMATAÇÃO ADIANTADO ";
RunTicker();}

function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();

<!-- end -->
</script>

BO10 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script Background Pop-Up
Background
Imagem
Texto
Script para Mensagem no Rodapé (opcional)
Música
Assinatura (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - BO10 - Background 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  Esmê, em agosto 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.