|
Nesta lição
10 usaremos o mesmo script da lição 09, agora com a imagem em movimento na
lateral esquerda. Pegue AQUI os
modelos ilustrativos.
Material: um background (pode ser um
tile), uma imagem
principal que receberá o efeito do script, um texto e o som. Anote as dimensões da sua imagem pois irá precisar
informá-las em DOIS lugares do código.
A imagem repetir-se-á no sentido vertical, portanto prepare-a
de modo que não apareçam emendas, ou use um gif de fundo transparente.
1 - Abra uma nova mensagem, clique na aba "Origem", delete tudo
o que lá está e cole o seguinte código:
2 - Indique os caminhos do background e da
imagem principal. Não esqueça de preservar as
aspas.
Caso prefira, aplique o background pela aba Editar (menu
FORMATAR/Plano de Fundo/Imagem).
3 - Detalhes importantes do script:
3.1 - Indique as dimensões da sua imagem em dois lugares
do código:
<DIV> </DIV><IMG id=pics style="DISPLAY: none" height=285
src="Caminho da imagem"
width=350>
<DIV id=imageholder
style="Z-INDEX: -1; LEFT: 0px; POSITION: absolute; TOP: 0px">
<SCRIPT language=VBScript>
<!--
direction="right" REM CHANGE SCROLL DIRECTION HERE
sizew=350 REM SCROLLING IMAGE WIDTH
HERE
sizeh=285 REM SCROLLING IMAGE
HEIGHT HERE
Atenção!!! É importante que você indique lugares indicados acima
as dimensões da sua imagem, pois se não o fizer o movimento não
será contínuo e vai dar uns "pulinhos". Cuide também para não
trocar o valor da largura com o da altura, e vice-versa.
3.2 - Já sabemos que esse script possibilita o uso da imagem no
topo ou na lateral, bem como permite mudar a direção do
movimento.
Nesta Lição 10, como queremos deixar a imagem na lateral,
teremos de indicar "down" (para
baixo) ou "up" (para cima) nesta
parte do script:
<SCRIPT language=VBScript>
<!--
direction="down" REM CHANGE SCROLL
DIRECTION HERE
Lembre-se de deixar a direção sempre entre aspas. No modelo 01
foi escolhido o sentido "down" e no modelo 02 o sentido "up".
3.3 - No tag STYLE, como a imagem agora posiciona-se na lateral
esquerda, teremos de indicar um valor para a MARGIN-LEFT:
370px um pouco maior do que a LARGURA da imagem.
3.4 - Vamos aproveitar essa lição para recordar os atributos da
fonte que estão no tag STYLE:
FONT-WEIGHT: bold
- estamos definindo que queremos o nosso texto realçado em
negrito. Se não quisermos devemos colocar FONT-WEIGHT: normal.
Se não tiver o atributo FONT-WEIGHT o programa, por padrão, já
sabe que é normal, ou seja, sem realce.
FONT-STYLE: italic
- estamos definindo que queremos o nosso texto em itálico.
FONT-SIZE: 12pt
- aqui definimos o tamanho da fonte
COLOR: #8f71bb
- aqui definimos a cor da fonte
FONT-FAMILY: Verdana
- aqui definimos o tipo de fonte.
TEXT-ALIGN: center
- estamos definindo o alinhamento centralizado.
Nota. No caso do modelo 01, como o texto NÃO está em uma tabela, podemos definir o alinhamento no tag
STYLE e ele aplicar-se-á ao texto.
3.5 - Como na lição anterior, na aba EDITAR, está aparecendo uma
linha atravessada no sentido horizontal. O comando que criou a
linha é esse aqui:
<HR style="DISPLAY: none">
Essa linha poderá ser retirada, mas vamos deixá-la.
3.6 - Não esqueça de digitar na Origem, a sua mensagem de rodapé
nesta parte do script:
window.status="... Sua mensagem de rodapé ..."
Nota. Para quem tem o IE 6.0: caso perceba algum conflito que
não possibilite a leitura da mensagem de rodapé, delete do
código a linha de comando acima e deixe sem mensagem de rodapé.
Quem tem o IE 7.0 lerá a mensagem de rodapé normalmente.
4 - Clique na abinha "Visualizar" para conferir se o efeito está
funcionando direitinho.
5 - Faça as adequações nas cores da moldura e barra de rolagem e
no bgcolor da mensagem, de acordo com as cores da sua
formatação.
6 - Na aba Editar digite (ou cole) o seu texto e aplique o som.
Lembre-se de usar algum recurso antibanner.
OBSERVAÇÃO. Repare o Modelo 02
- Foi usada a tabela da lição 03, com algumas alterações.
- Foi usada, propositalmente, uma imagem principal com uma
altura bem grande (1388 px) para que você visse as
possibilidades de formatação com esse script.
A imagem principal foi montada no PSP colando várias imagens
menores e aplicada uma mask para dar a impressão de tira de
filme.
 |
