Imagem em movimento quando tocada pelo cursor

 


Veja como conseguir um efeito de imagem em movimento quando tocada pelo mouse, como neste exemplo.

Abra uma nova mensagem, clique em "Origem", apague tudo o que está escrito e cole o seguinte código:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>BODY {
FONT-SIZE: 16pt; COLOR: #ff3333; MARGIN-RIGHT: 10px; FONT-FAMILY: "Comic Sans MS"
}
</STYLE>

</HEAD>


<BODY background="endereço do papel de carta algo do tipo C:\tutorial\lili\imagens\carinhososf.jpg"
onload=zyva()>
<DIV>Escrever o texto aqui</DIV>
<P><STRONG><FONT color=#00cc33 size=4></FONT></STRONG>&nbsp;</P>
<DIV><IMG id=Om style="DISPLAY: none"
src="endereço da imagem algo do tipo C:\Meus documentos\Minhas figuras\gifs animados\Ursinhos\carinhosos5.gif">
<SCRIPT>

document.body.scroll="yes"
document.body.style.cursor="crosshair"
//------------------------
N=5; // nombre de boules
am=1.08; // amortissement
en=0.8; // energie
t=48; // taille
//------------------------
img=0
ym=0;xm=0
xmb=0;ymb=0
vx=new Array(N)
vy=new Array(N)
xb=new Array(N)
yb=new Array(N)
for(i=0;i<N;i++){vx[i]=0;vy[i]=0}

function cpaspossible() {
//---choc souris contre boules---------------------------
for(i=0;i<N;i++){
xm2 = (img[i].style.pixelLeft+(img[i].style.pixelWidth/2) - xm) + 0.05
ym2 = (img[i].style.pixelTop+(img[i].style.pixelHeight/2) - ym) + 0.05
if (xm2<0) s=-1; else s=1;
//---sauve pos
xb[i]=img[i].style.pixelLeft
yb[i]=img[i].style.pixelTop
//---distance entre la boule et la souris
r = s*Math.sqrt(Math.pow(xm2,2)+Math.pow(ym2,2))
//---si < rayon boules
if (Math.abs(r)<t){
//---calcul angle
a = Math.atan(ym2/xm2)*180/Math.PI
m = (a - Math.floor(a/360)*360)*Math.PI/180
//---calcul vitesse déplacement souris
d=Math.sqrt(((xm-xmb)*(xm-xmb))+((ym-ymb)*(ym-ymb)))
//---gestion de la répulsion de la boule
c=t-Math.abs(r);if (c<0)c=0
//---déplacement boule
img[i].style.pixelLeft+= s*(c+d)*Math.cos(m)
img[i].style.pixelTop+= s*(c+d)*Math.sin(m)
//---sauvegarde vitesse déplacement boule
vx[i]+=img[i].style.pixelLeft-xb[i]
vy[i]+=img[i].style.pixelTop-yb[i]
}
//-----choc des boules entre elles
for(j=0;j<N;j++){
if(i!=j){
xm2 = (img[j].style.pixelLeft - img[i].style.pixelLeft) + 0.05
ym2 = (img[j].style.pixelTop - img[i].style.pixelTop) + 0.05
if (xm2<0) s=-1; else s=1;
xb[j]=img[j].style.pixelLeft
yb[j]=img[j].style.pixelTop
r = s*Math.sqrt(Math.pow(xm2,2)+Math.pow(ym2,2))
if (Math.abs(r)<=2*t){
a = Math.atan(ym2/xm2)*180/Math.PI
m = (a - Math.floor(a/360)*360)*Math.PI/180
d=en*Math.sqrt(((vx[i])*(vx[i]))+((vy[i])*(vy[i])))
c=2*t-Math.abs(r);if (c<0)c=0
img[j].style.pixelLeft+= s*(c+d)*Math.cos(m)
img[j].style.pixelTop+= s*(c+d)*Math.sin(m)
vx[j]+=img[j].style.pixelLeft-xb[j]
vy[j]+=img[j].style.pixelTop-yb[j]
}
}
}
//-----amorti-----
if(Math.abs(vx[i])>1)vx[i]=vx[i]/am; else vx[i]=0
if(Math.abs(vy[i])>1)vy[i]=vy[i]/am; else vy[i]=0
//-------gestion rebonds bords fenêtre--------
if(img[i].style.pixelTop<0 && vy[i]<=0)vy[i]=-vy[i]+1
if(img[i].style.pixelTop+img[i].style.pixelHeight>document.body.offsetHeight && vy[i]>=0)vy[i]=-vy[i]-1
if(img[i].style.pixelLeft<0 && vx[i]<=0)vx[i]=-vx[i]+1
if(img[i].style.pixelLeft+img[i].style.pixelWidth>document.body.offsetWidth && vx[i]>=0)vx[i]=-vx[i]-1
//---position finale------------
img[i].style.pixelLeft+=vx[i]
img[i].style.pixelTop+=vy[i]
}
}
//---------lancement-----------------
function zyva() {
for(i=0;i<N;i++) {
code="<img src='"+Om.src+"' style='position: absolute;left:"+(document.body.offsetWidth+2*t*i)+";top:100;width:"+(2*t)+";height:"+(2*t)+"'>"
document.body.insertAdjacentHTML("afterBegin",code)
}
img=document.all.tags("IMG")

setInterval("cpaspossible()",1)
}
//----(ma)traque de la souris--------
document.onmousemove = momove;
function momove() {
xmb=xm
ymb=ym
xm = window.event.clientX
ym = window.event.clientY
}

</SCRIPT>
</DIV><FONT size=2></FONT>
<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 = ". . . . http://www.ilove.com.br/lili . . . . ";
RunTicker();}

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

<!-- end -->
</SCRIPT>
<!--VERMEER BOT=HTMLMarkup EndSpan -->

</BODY></HTML>

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

Substitua o que está em vermelho pelas imagens correspondentes ao indicado.

Para a imagem do cursor escolha alguma figura em tamanho pequeno.

Se você quiser alterar a aparência do cursor, veja esta dica e faça a alteração neste item: document.body.style.cursor="crosshair"

(Este script traz também uma mensagem de rodapé.)

 

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 que o efeito só será percebido quando clicamos em "Visualizar".

(Dica adaptada por Lilian Russo e Paulo Henrique Lomanto para uso em e-mails)


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



.