|
Nesta lição
continuaremos estudando o filtro de transição, agora aplicado em
duas imagens. Veja o modelo ilustrativo.
Materiais: um background, duas imagens com as MESMAS dimensões, um
texto e um arquivo de som.
Anote as dimensões das imagens, pois precisará informá-las no
código.
1 - Abra uma nova mensagem, clique na aba "Origem", delete tudo o
que lá está e cole o seguinte código:
2 - Indique o caminho do background, não esquecendo de preservar as
aspas. Caso queira, aplique o background pela aba Editar (menu
Formatar/Plano de fundo/imagem).
3 - Indique o caminho das imagens que receberão o efeito do script e
suas dimensões nesta parte do código:
<TD class=tb1 id=tab1 align=middle width="100%"
bgColor=#ffffff><DIV
style="LEFT: 0px; WIDTH: 500px;
POSITION: relative; TOP: 0px; HEIGHT: 450px"><IMG
id=p1
style="LEFT: 0px; WIDTH: 500px;
POSITION: absolute; TOP: 0px; HEIGHT: 450px"
src="caminho da imagem 1"> <IMG id=p2
style="LEFT: 0px; WIDTH: 500px;
POSITION: absolute; TOP: 0px; HEIGHT: 450px"
src="caminho da imagem 2"></DIV></TD></TR>
Nota. A cor branca que está no plano de fundo da célula que contém
as imagens está definida em bgColor=#ffffff
4 - As molduras das tabelas estão definidas no tag STYLE em .tb1 e
.tb2. Altere as cores (sempre uma de cada vez) e você verá onde
essas molduras estão aplicadas.
Altere também as cores do fundo das tabelas e células (bgColor)
adequando-as às cores da sua formatação.
5 - A Caixa de texto.
Neste código, está sendo usada uma "Caixa de texto" sobreposta a uma
das células da tabela. Seus atributos estão no tag STYLE em .txt
.tx {
BORDER-RIGHT: #cad5db 3px double; PADDING-RIGHT: 10px; BORDER-TOP:
#cad5db 3px double; PADDING-LEFT: 10px; SCROLLBAR-FACE-COLOR:
#737979; FONT-SIZE: 10pt; PADDING-BOTTOM: 10px;
SCROLLBAR-HIGHLIGHT-COLOR: #b4baba; BORDER-LEFT: #cad5db 3px double;
SCROLLBAR-SHADOW-COLOR: #b4baba; COLOR: #cad5db; SCROLLBAR-3DLIGHT-COLOR:
#b4baba; SCROLLBAR-ARROW-COLOR: #b4baba; PADDING-TOP: 10px; SCROLLBAR-TRACK-COLOR: #737979; BORDER-BOTTOM: #cad5db 3px double;
FONT-FAMILY: Verdana; SCROLLBAR-DARKSHADOW-COLOR: #505858;
SCROLLBAR-BASE-COLOR: #737979;
BACKGROUND-COLOR: #1b55a1
}
BACKGROUND-COLOR: #1b55a1 - define a cor do plano de fundo da caixa
de texto.
A caixa de texto tem uma barra de rolagem que pode ter cores
diferentes das cores definidas para a barra de rolagem da mensagem.
Faça as alterações nos atributos da caixa de texto de forma a
adequá-la à sua formatação.
6 - Quanto ao script
6.1 - Neste script a equação que define o movimento do background
está nesta parte:
h=h
v=v-1
document.body.style.backgroundposition=h&" "&v
Você pode alterar a direção e o sentido do movimento, conforme
orientações da lição 05 da fase Avançada.
6.2 - Caso queira alterar o efeito do filtro de transição altere o
número 14 em Sub trans1() nesta parte, usando o mesmo número para p2
e p1
p2.filters(0).transition=14
p1.filters(0).transition=14
Faça o mesmo em Sub trans2(), Sub trans3() e Sub trans4()
Sugestão:
experimente os números 10, 17, 8 e 23, para p2 e p1, em Sub
trans1(), Sub trans2(), Sub trans3() e Sub trans4() respectivamente.
Nota. Consulte o ANEXO 01 -
Quadro Geral dos efeitos de Transição.
6.3 - Não esqueça de digitar a mensagem de rodapé no lugar indicado
no script.
7 - Ainda na Origem, no tag STYLE faça todas as alterações
necessárias no código da moldura e barra de rolagem colorida (mude
as cores, espessura das bordas, estilo de moldura)
8 - Na aba Editar digite o seu texto e aplique o som.
Seu Exercício:
envie a sua formatação à lista não esquecendo de conferir o tamanho
(em kb) e de usar os recursos antibanner.
 |
