BO09 Seguindo o Mouse - formatação adian

    
BO09 Seguindo o Mouse

O script que veremos aqui é bastante diferente. Seu efeito  é sobre o background que se oculta ou fica visível conforme movimentamos o mouse para a direita ou para a esquerda.  Espero que gostem.

Também aqui vamos usar o processo de substituição do código e 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:

Background Seguindo o Mouse

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16481" name=GENERATOR>
<STYLE>BODY {
BORDER-RIGHT: #000000 10px ridge; BORDER-TOP: #000000 10px ridge; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; BORDER-LEFT: #000000 10px ridge; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #FFFFFF; BORDER-BOTTOM: #000000 10px ridge; SCROLLBAR-DARKSHADOW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #FFFFFF
}
</STYLE>
</HEAD>
<BODY language=vbs onmousemove=mouseMove onmouseout=shutterTest bgColor=#ffffff
background=CAMINHO DO BACKGROUND AQUI>
<DIV>&nbsp;</DIV>
<STYLE>
BODY {
font-size:10pt;
color:#000000;
font-family:arial, tahoma}

.letterStyle {
COLOR: #000000;
FONT-FAMILY:arial, tahoma;
FONT-SIZE: 11pt;
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px}

</STYLE>

<SCRIPT language=VBS>
'----------------------------------------------------------------------------
' Cover Letter 3, by Bill Scott
'----------------------------------------------------------------------------
' All HTML and script by Bill Scott, August, 2000
' billscott@redrivernet.com
' http://www.lettermanstationery.homepage.com

' Cover letter 3 Script and HTML follow.

Option Explicit

Dim screenx, screeny
Dim mousex
Dim percentOpen
Dim letterWidth, letterHeight
Dim resizeFlag
Dim startFlag

resizeFlag=false
startFlag=0


' The padding values in the letterStyle area above are the margins for the text in the letter. Adjust for your background.
' Set letter width here. Width is proportionate to window width.
letterWidth=.7

' Set letter height here. Height is proportionate to window height.
letterHeight=.98


Sub Window_OnLoad()
On Error Resume Next
startFlag=1
percentOpen=0

document.body.scroll="no"
window.scrollTo 0,0

screenx=document.body.clientWidth
screeny=document.body.clientHeight

Image1.style.posHeight=screeny
Image1.style.posWidth=screenx

Image1.style.posTop=0
Image1.style.posLeft=0

letter2.style.posWidth=screenx*letterwidth
letter2.style.posHeight=screeny*letterHeight
letter2.style.posLeft=(screenx-letter2.style.posWidth)/2
letter2.style.posTop=(screeny-letter2.style.posHeight)/2

letter2.innerHTML=letter.innerHTML

letter2.style.visibility="visible"

tip.style.posTop=5
tip.style.posLeft=5
tip.style.visibility="visible"

Image1.style.visibility="visible"

SetTimeOut"removeTip",4000
End Sub

Sub Window_OnResize()
if resizeFlag then
window.scrollTo 0,0
Window_OnLoad
resizeFlag=false
Exit Sub
else
resizeFlag=true
end if
End Sub

Sub removeTip()
tip.filters(0).Apply()
tip.style.visibility="hidden"
tip.filters(0).Play(2.000)
End Sub

Sub mouseMove()
if startFlag=0 then Exit Sub
mousex=window.event.x

percentOpen=mousex/((screenx*letterWidth)+letter2.style.posLeft-10)
if percentOpen>(screenx*letterWidth) then percentOpen=1
if percentOpen<.05 then percentOpen=0
Image1.style.posTop=-(percentOpen*Image1.style.posHeight)
End Sub

Sub shutterTest()
if percentOpen<.5 then
percentOpen=0
Image1.style.posTop=-(percentOpen*Image1.style.posHeight)
end if
End Sub

</SCRIPT>
<!--IF YOU DESIRE A GENERAL SCREEN BACKGROUND, SPECIFY IT HERE. --><!--SPECIFY THE LETTER BACKGROUND HERE--><IMG
id=letterBkg style="DISPLAY: none; LEFT: -1800px; POSITION: absolute"
src="CAMINHO DO BACKGROUND DA CAIXA DE TEXTO"> <!--SPECIFY THE BORDER COLOR OF YOUR LETTER HERE. LOOK FOR border-color:--><!--YOU CAN ALSO CONTROL ITS WIDTH AND STYLE. LOOK FOR border-style: AND border:width. STYLES - solid, double, ridge, inset, outset, groove, none-->
<SCRIPT language=vbs>
document.writeln "<DIV id=letter2 class=letterStyle style='z-index:1; visibility:hidden; overflow:auto; position:absolute; left:-1800px; border-style:ridge; border-width:5px; border-color:#000000; background-image:url(" & letterBkg.src & ")'>&nbsp;</div>"
</SCRIPT>

<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 = " MENSAGEM DE RODAPÉ AQUI ";
RunTicker();}

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

<!-- end -->
</SCRIPT>

<DIV id=tip
style="FONT-WEIGHT: bold; Z-INDEX: 3; FILTER: blendTrans; LEFT: -1800px; VISIBILITY: hidden; COLOR: #000000; FONT-STYLE: italic; POSITION: absolute; BACKGROUND-COLOR: #ffffff">Leve
o mouse para a direita para ver o texto</DIV><!--IF YOU EVER SPECIFY WHITE OR LIGHT COLORED TEXT IN THE letterStyle AREA ABOVE, BE SURE TO CHANGE THE BACKGROUND COLOR HERE TO SOMETHING DARK SO YOU CAN READ THE TEXT IN THE COMPOSE WINDOW-->
<DIV class=letterStyle id=letter
style="BORDER-RIGHT: #000000 8px ridge; BORDER-TOP: #000000 8px ridge; LEFT: 10px; VISIBILITY: hidden; BORDER-LEFT: #000000 8px ridge; WIDTH: 500px; BORDER-BOTTOM: #000000 8px ridge; POSITION: absolute; TOP: 10px; HEIGHT: 300px; BACKGROUND-COLOR: #ffffff">
<DIV align=center><FONT face="Trebuchet MS" color=#000000 size=3>TEXTO AQUI</FONT></DIV></DIV>
<!--SPECIFY YOUR COVER IMAGE HERE--><!--NO NEED TO SPECIFY ITS WIDTH AND HEIGHT--><IMG
id=Image1
style="Z-INDEX: 2; LEFT: -1800px; VISIBILITY: hidden; POSITION: absolute"
src="CAMINHO DA IMAGEM PRINCIPAL AQUI" border=0>
<DIV>&nbsp;</DIV>
<META content="MSHTML 6.00.2800.1170" name=GENERATOR>
<STYLE></STYLE>

<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV></DIV></BODY></HTML>

4 - Após colado o script na Origem, volte à abainha "Editar" e insira o Background através de: Formatar/Plano de fundo/Imagem.
5 - Em seguida insira a imagem principal  e o background da caixa de texto 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 backgound 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.

- Coloque aqui "Test bgColor=#ffffff " uma cor no seu background que combine com sua imagem.

- Localize este trecho (fica logo abaixo do caminho do background da Caixa de Texto):
<SCRIPT language=vbs>
document.writeln "<DIV id=letter2 class=letterStyle style='z-index:1; visibility:hidden; overflow:auto; position:absolute; left:-1800px; border-style:ridge; border-width:5px; border-color:#000000; background-image:url(" & letterBkg.src & ")'>&nbsp;</div>"
</SCRIPT>
Aqui você altera o estilo, largura e cor das bordas da caixa de texto.

- Localize o trecho: "style="FONT-WEIGHT: bold; Z-INDEX: 3; FILTER: blendTrans; LEFT: -1800px; VISIBILITY: hidden; COLOR: #000000; FONT-STYLE: italic; POSITION: absolute; BACKGROUND-COLOR: #ffffff">Leve o mouse para a direita para ver o texto".  Aqui você troca a cor, estilo da fonte e também a cor do background do recadinho que aparece quando visualiza a mensagem. Pode trocar também os dizeres do mesmo.

- style="BORDER-RIGHT: #000000 8px ridge; BORDER-TOP: #000000 8px ridge; LEFT: 10px; VISIBILITY: hidden; BORDER-LEFT: #000000 8px ridge; WIDTH: 500px; BORDER-BOTTOM: #000000 8px ridge; POSITION: absolute; TOP: 10px; HEIGHT: 300px; BACKGROUND-COLOR: #ffffff">
<DIV align=center><FONT face="Trebuchet MS" color=#000000 size=3>
Neste trecho destacado em lilás, são alteradas as cores, tamanho e estilo das bordas, cor do fundo e também tipo e tamanho da fonte da caixa de texto que aparece na Aba Editar.

Este script já contem a mensagem para o rodapé, basta digitar a sua no local indicado.
7 - Após todas as alterações terem sido feitas, cheque o resultado clicando na abinha "Visualizar".
8 - Estando tudo certinho e a seu gosto, clique novamente em "Editar" e complemente a formatação com um texto e uma bela música.  Dê preferência às músicas online, pois diminuem muito o peso final de seu trabalho.
Dúvidas?  Pergunte, pois teremos o maior prazer em ajudar.


AULA PRATICAAAAAAAAAAAAAAAAAAAAAAAAA

BO09 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito do bacground seguindo o mouse.
Background, mais uma pattern.
Imagem principal com 1024 x 600.
Texto
Música
Assinatura (opcional)





Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - BO09 - Background seguindo o Mouse.
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 julho/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.