Beijos e corações no mouse

 

Para conseguir um efeito de beijos e corações que acompanham o mouse, como você pode ver clicando aqui neste exemplo, faça o seguinte:

1. Salve estas duas imagens em uma pastinha de seu micro

2.Abra uma nova mensagem.

3. Apague tudo o que está na aba "Origem" e cole o seguinte código, substituindo os dois endereços que estão em vermelho no código pelo endereço do coração e do beijo que você salvou.

<IMG name="pri_imagem" alt="" hspace=0
src="endereço da imagem beijo"
align=baseline border=0 style="position:absolute; top:-1000; left:-1000; visibility: hidden">
<IMG name="seg_imagem" alt="" hspace=0
src="endereço da imagem coração"
align=baseline border=0 style="position:absolute; top:-1000; left:-1000; visibility: hidden">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<STYLE type=text/css>
<!--
h1 {
color:#cc3333;
font-family:"Comic Sans MS",Helvetica;
}
h3 {
color:#993333;
font-family:"Comic Sans MS",Helvetica;
}
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
-->
</STYLE>

<SCRIPT language=JavaScript1.2 type=text/JavaScript>
<!-- cloak

//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script

kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
theimage = document.pri_imagem.src //the 1st image to be displayed
theimage2 = document.seg_imagem.src //the 2nd image to be displayed


//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {

posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}

function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</SCRIPT>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2716.2200" name=GENERATOR>
<STYLE></STYLE>
<title>mouse</title></HEAD>
<BODY bgColor=#ffffff >
<SCRIPT language=JavaScript type=text/JavaScript>
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}

// decloak -->
</SCRIPT>

<P align=center>&nbsp;</P>
<DIV><FONT face="Comic Sans MS" size=2></FONT>&nbsp;</DIV>
<DIV><FONT face="Comic Sans MS" size=2></FONT>&nbsp;</DIV></BODY></HTML>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Obs.: Você pode usar outras imagens com este mesmo código.


Bom trabalho!



Aqui
você encontra a versão prontinha para e-mail desta dica. Está zipada no formato .eml (próprio para o Outlook Express)

(Lembre-se de clicar na aba "Visualizar" para ver o efeito.)

 

Este script foi traduzido e adaptado por Lilian Russo da página:Dynamicdrive

Lilian Russo - Todos os Direitos Reservados - ©2002/2007




.