|
Nesta lição
aplicaremos um script que cria o efeito de pequenas imagens subindo,
também conhecido como "efeito bolha". Peque
AQUI os modelos
ilustrativos.
Vamos testar o script com 01 imagem subindo para entender o seu
funcionamento. Faça o seguinte:
1 - Escolha uma pequena imagem (de preferência um gif com fundo
transparente).
Nota. Na parte de material de apoio você encontrará um arquivo
compactado com vários pequenos gifs. Escolha um deles ou qualquer
outro de sua preferência.
2 - Abra uma nova mensagem, delete tudo o que está na aba "Origem" e
cole o código abaixo:
3 - Indique o caminho da imagem no lugar indicado no código, não
esquecendo de preservar as aspas.
<IMG style="DISPLAY: none"
src="caminho do gif" name=bubble>
Nota. Sugerimos a leitura da DICA GERAL nº. 01 : "Como não errar
a indicação do caminho de um arquivo na Origem".
4 - Caso queira diminuir o número de imagens que se movimentam na
tela, altere em var no = 15 para um
número menor.
5 - Caso queira alterar a velocidade do movimento das imagens mude o
número em var speed = 2
6 - Vá na aba "Visualizar" para verificar se está tudo funcionando
certinho.
7 - Você pode agora completar a formatação aplicando o background
(menu FORMATAR / Plano de Fundo / Imagem), adequando os códigos do
tag STYLE, digitando o texto, inserindo o som, etc.
ou,
Pode fechar a mensagem sem salvar, abrir uma nova mensagem,
formatá-la com um background, uma tabela se quiser, e depois colar
na Origem o script das imagens caindo. Pegue
AQUI arquivo .txt com o
código do script para 01(uma) imagem e o script para 03 (três)
imagens subindo.
Seu Exercício:
apresente à lista uma formatação completa (moldura e barra de
rolagem colorida, atributos de fonte, margens, texto, som, mensagem
de rodapé, etc.) e aplicando o script das imagens subindo. Fica à
sua escolha apresentá-la conforme o modelo (com um background com
imagem na lateral esquerda), ou com um top e/ou usando uma das
tabelas estudadas nas lições anteriores (como no modelo 02).
Variação do script para 3 imagens
Esse mesmo script poderá ser usado com três imagens subindo. Veja o
modelo 02 e o script correspondente. Basta indicar os 3 (três) caminhos de imagens miúdas
nos lugares indicados no código.
Fica assim:
<IMG style="DISPLAY: none"
src="caminho da imagem miúda 1" name=bubble1> <IMG
style="DISPLAY: none" src="caminho da imagem miúda 2" name=bubble2>
<IMG style="DISPLAY: none" src="caminho da imagem miúda 3" name=bubble3>
Observações:
1) Esse efeito, tal qual o da lição anterior, também é muito
conhecido.
2) Orientamos para deletar tudo o que estiver na Origem e colar o
código completo apenas para efeitos didáticos, para mostrar onde o
script se encaixa dentro da estrutura do HTML, no código fonte
(Origem).
No entanto é preciso esclarecer que o script em si é a parte que
está compreendida entre os tags <SCRIPT> e </SCRIPT> (abertura e
fechamento).
No caso deste script é necessário indicar também a parte que se
refere à imagem (ou imagens) para que o programa saiba em qual imagem
(quais imagens) será
aplicado o efeito.
3) Em certos casos de uso de script e imagens com animação pode
ocorrer uma espécie de conflito: ou o script anular a animação da
imagem, ou a animação da imagem criar uma certa interferência.
Repare a barra de rolagem do modelo 01. Ela está um tanto "trêmula",
certo? Faça agora um teste: mude o gif do modelo 01 para algum que
não tenha animação. Você verá que a barra de rolagem ficará
"normal", tal qual está a barra do modelo 02.
4) Na formatação do modelo 02 foi usada a mesma tabela da lição 05.
 |
