CI01 Bolhas - formatação adian

    

CI01 Bolhas

Esse tutorial oferece o script do efeito bolhas no cursor. Basta movimentar o cursor (seu mouse) pelo seu papel de carta, no Outlook para visualizá-lo.

Materiais
1 background
1gif pequeno - bolha
1 imagem (opcional)
texto
1 música
1 assinatura
PS: disponibilizado dois modelos de bolhas

1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem"
3 -Coloque o cursor no final do código pertencente a cor de fundo "bgColor=#fffffff" e dê enter:

4 - Cole o seguinte código:

<DIV>&nbsp;</DIV>
<IMG id=bubble style="DISPLAY: none"
src="Coloque aqui o caminho da imagem -bolha">
<SCRIPT language=JavaScript>
<!-- Original: Kurt Grigg (kurt.grigg@virgin.net) -->
<!-- Web Site: http://website.lineone.net/~kurt.grigg/javascript -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
Image0 = new Image();
Image0.src = bubble.src;
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
}
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] < -40) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random() * 6 + 4;
grow[i] = 8;
nsSize[i] = Math.random() * 15 + 5;
}
if (ns) {
document.layers['sn'+i].left = Xpos[i] + wscrll;
document.layers['sn'+i].top = Ypos[i] + hscrll;
}
else {
si[i].style.pixelLeft = Xpos[i] + wscrll;
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = grow[i];
si[i].style.height = grow[i];
}
grow[i] += rate[i];
Cstep[i] += Step[i];
if (grow[i] > 24) grow[i] = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
// End -->
</SCRIPT>

imagem usada no script pode ser com terminação jpg ou gif.
Para aumentar o volume de imagens que disparam do mouse altere o valor em: Amount = 20
Para aumentar o velocidade altere o valor em: setTimeout('MouseBubbles()', 10)  -  movimento + rápido = número menor e vice versa.
5 - Colado o script. Clico na abinha editar. Aparecerá um X vermelhinho:

6 - Clico em inserir imagem e vou buscar o caminho da minha imagem. Vou até a pastinha onde tenho salvado a imagem, clique em abrir. Aparecerá o caminho:

7 - Copio esse caminho ( coloque o cursor dentro do local onde está o endereço  dê Ctrl+A para selecionar todo o endereço . Dê Ctrl +C para copiar.
8 - Nessa janelinha clique em cancelar.
9 - Clique na abinha "Origem" procure no script a frase: Coloque aqui o caminho da imagem - bolha

10 -Apague e cole ( Ctrl+V) o endereço:

Esse endereço tem que estar entre as aspas.

11 - Colocado o caminho da imagem da bolha, cheque o efeito na abinha "Visualizar":
PS: coloque o cursor ( mouse) sobre o papel .

12 - Prontinho o efeito bolha. Fofíssimo, não?
13 - Volte a abinha "Editar" e complete a formatação  com:
background (Formatar/Plano de fundo/ Imagem)
imagem ( opcional)
borda colorida
barra de rolagem colorida
script para rodapé ( opcional - pois muito interferem no funcionamento do script principal, se colocar prefira o que não tem movimento)
texto
música ( Formatar/Plano de fundo/ Som)
assinatura ( opcional)


Sugestão para Script de Rodapé

<SCRIPT language=JavaScript>
<!--
ScrollSpeed = 100; // milliseconds between scrolls
ScrollChars = 0; // chars scrolled per time period

function SetupTicker() {
// add space to the left of the message
msg = " ~ ~ ~ Escreva seu texto aqui ~ ~ ~ ";
RunTicker();}

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

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

CI01 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito bolhas no cursor
background
Imagem ( opcional)
Texto
Borda Colorida
Barra de Rolagem Colorida
Script para Mensagem no Rodapé (opcional)
Música
Assinatura (opcional)




Não esqueça, por favor:
colocar no assunto: seu nome ou nick - CI01 - Cursor: efeito bolha
No corpo do e-mail coloque o link correspondente a esse tutorial.
Não esqueça do anti-banner

Copyright© 2002/2004 Dama Da Noite * Todos os direitos reservados*

Esse  tutorial foi criado por brisa® em janeiro 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.