|
Nesta última lição
trabalharemos com um script de dois grandes mestres: Gerard
Ferrandez e Edgar Poirier. Como no caso da lição anterior esse
script pode ser formatado com um background no pop-up ou uma tag. Veja o
modelo ilustrativo.
Material:
um background principal, um background (ou uma tag) com dimensões aproximadas de 600 x 450 para o pop-up, um background
transparente, um texto e um arquivo de som.
Anote as dimensões da
imagem que servirá de plano de fundo do pop-up, pois serão essas
dimensões que definirão o tamanho do container.
1 - Abra uma
nova mensagem, clique na aba "Origem", apague tudo o que tem lá e
cole o seguinte código:
2 - Indique os
caminhos dos backgrounds, não esquecendo de preservar as aspas. Você
pode aplicar o background principal pela Origem ou pela aba Editar
(menu Formatar/Plano de Fundo/Imagem).
Atenção!!! Não delete
essa parte do código: <BODY bgColor=#930608 background="Caminho
do background principal" scroll=no onload=doIt()>
Se for deletada não
acarretará erro de script, mas sumirá todo o conteúdo do
pop-up.
3 - Detalhes importantes do script:
3.1 - As
dimensões do container: indique as dimensões do
background ou imagem que escolheu como plano de fundo nesta
parte:
<!-- 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="Caminho do background do container">
3.2 -
Indique também as MESMAS dimensões nesta outra
parte:
<SPAN id=haze
style="FILTER: Alpha(Opacity=80);
LEFT: 0px; WIDTH: 600px; POSITION:
absolute; TOP: 0px; HEIGHT: 450px"></SPAN>
Essa parte do
código refere-se à caixa que contém o background transparente. Ao
defini-la com as mesmas dimensões do container você está indicando
que o seu background transparente (no modelo, aquele que foi usado
para o efeito chuva) estará aplicado sobre toda a imagem do plano de
fundo do container.
Repare ainda que, no background
transparente está aplicado o filtro de opacidade, ou seja, você pode
aumentar ou diminuir a transparência desse background sem afetar a
imagem de plano de fundo.
3.3 - Ainda com relação ao
background transparente: o seu movimento está definido na linguagem
do script nesta
parte:
x=x
y=y+1
js.haze.style.backgroundPosition=x+"
"+y
No modelo 01 foi alterada a equação "x" para movimento
diagonal. No modelo 02 foi mantido o movimento vertical do
background transparente.
Repare que o script
desta lição é um javascript, no entanto valem os mesmos conceitos
para o movimento de background do vbscript que você estudou na lição
05 do nível Avançado.
3.4 - O botão ABRIR que acionará o pop-up - seu estilo (cores
de moldura, fonte, dimensões, distância em relação às margens, cor
de plano de fundo, etc.) - está definido no tag BUTTON, nesta
parte:
<BUTTON title=abrir
style="BORDER-RIGHT:
#57331d 2px inset; BORDER-TOP: #57331d 2px outset; FONT-WEIGHT:
bold; FONT-SIZE: 12pt; Z-INDEX: 100; BACKGROUND: #fff4de; LEFT:
20px; BORDER-LEFT: #57331d 2px outset; WIDTH: 80px; CURSOR: hand;
COLOR: #57331d; BORDER-BOTTOM: #57331d 2px inset; FONT-FAMILY:
Verdana; POSITION: absolute; TOP: 20px; HEIGHT:
30px"
onclick=parent.doPop() align="center">abrir</BUTTON>
Abra o modelo 01 e
altere os atributos deste botão para compreendê-los.
3.5 - O
botão FECHAR - seu estilo (cores de
moldura, fonte, dimensões, distância em relação às margens, cor de
plano de fundo, etc.) - está definido no tag BUTTON, nesta
parte:
<BUTTON
title=fechar
style="BORDER-RIGHT:
#930608 2px inset; BORDER-TOP: #930608 2px outset; FONT-WEIGHT:
bold; FONT-SIZE: 10pt; Z-INDEX: 100; BACKGROUND: none transparent
scroll repeat 0% 0%; LEFT: 10%; BORDER-LEFT: #930608 2px outset;
CURSOR: hand; COLOR: #57331d; BOTTOM: 2.5%; BORDER-BOTTOM: #930608
2px inset; FONT-FAMILY: Verdana; POSITION:
absolute"
onclick=parent.objPopup.hide() align="center">fechar</BUTTON>
Repare que escolhi
deixar o botão FECHAR transparente, ou seja, sem uma cor no seu
plano de fundo. Se preferir, faça como no botão ABRIR, definindo uma
cor para o plano de fundo do botão FECHAR no atributo
BACKGROUND. Além disso, você pode alterar a posição do botão fechar
para adequar à sua imagem de fundo do pop-up. Basta alterar as
porcentagens de LEFT e BOTTOM.
Ainda no modelo 01, altere os atributos do botão
FECHAR
para compreender as suas funções.
Nota. Na verdade
nem precisaria o botão FECHAR. Clicando na tela da mensagem o pop-up
fecha, sem necessidade do botão, mas mantivemos o script como
programado por seus autores.
3.6 - A caixa de texto está
definida em: <DIV id=T1
3.7 -
Na parte do script podemos ainda alterar os seguintes
estilos:
a) os atributos da moldura em volta do container:
objPopupBody.style.border="#930608 4px
solid"
b) a cor do plano de fundo do container:
objPopupBody.style.backgroundColor="#fdeec5"
4 - Faça todas as alterações nas
cores das molduras, barra de rolagem, etc. harmonizando-as com as
cores da sua formatação. Altere também os atributos da fonte da
caixa de texto.
5 - Na Origem, acrescente um script para a
sua mensagem de rodapé.
6 - Na aba Editar, digite o texto e
aplique o som.
Comentário Final: a grande maioria dos scripts
com pop-up são tela cheia (full screen), ou seja, suas dimensões ocupam
totalmente a tela do monitor. O problema é: a depender da resolução
de tela e de certas definições do script, pode ocorrer o caso em que
o botão FECHAR fique fora do campo de
visão, "travando" a tela e causando um certo transtorno. Se ocorrer
uma situação dessas com você, clique no botão ESC do teclado para tentar fechar a
mensagem.
 |
