Preserved Topic: mouse effect $Pages that link to <a href="https://ozoneasylum.com/backlink?for=17933" title="Pages that link to Preserved Topic: mouse effect" rel="nofollow" >Preserved Topic: mouse effect\$

Author	Thread
Copycat Nervous Wreck (II) Inmate From: Belgium Insane since: Apr 2001	posted 04-19-2001 20:09 i just want to know how to make a mouse effect like you can see in these pages: http://www.ozones.com/splatter.html and http://www.ozones.com/blueprint.html.
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 04-20-2001 18:52 Thats more code than I feel like typing but here's the basics You need to obviously track the MousePos you can do that like this: (there is diferent code for each browser so it's a pain) if (ie
Copycat Nervous Wreck (II) Inmate From: Belgium Insane since: Apr 2001	posted 04-21-2001 15:23 Thanks for the help and reply
Copycat Nervous Wreck (II) Inmate From: Belgium Insane since: Apr 2001	posted 04-21-2001 15:37 I tried to put an animated gif in the code but when i look at the result, i can see the gif but it is not animated. What can be the problem?
mr.maX Maniac (V) Mad Scientist From: Belgrade, Serbia Insane since: Sep 2000	posted 04-21-2001 22:55 What is the URL of that problematic page (we have to see it before we can make any comments)?
Copycat Nervous Wreck (II) Inmate From: Belgium Insane since: Apr 2001	posted 04-22-2001 13:40 The site is not published yet, but here is the code (it's from a guru's network tutorial): <html> <head> <STYLE TYPE="text/css"> <!-- body { font-size:10px; color:#000000; font-family: verdana; } b { font-size:10px; color:#000000; font-family: verdana; font-weight: bold;} p { font-size:10px; color:#000000; font-family: verdana; } br { font-size:10px; color:#000000; font-family: verdana; } TD { font-size:10px; color:#000000; font-family: verdana;} H1 { font-size:14px; color:#000000; font-family: verdana; } H2 { font-size:12px; color:#000000; font-family: verdana; } TH { font-size:12px; color:#000000; font-family: verdana; } a{ text-decoration: none; color: #0000d9; } a:visited{ text-decoration: none; color: #000000; } a:hover{ text-decoration: none; color: #000000; background-color:#F0F0F8; } //--> </STYLE> <script language="JavaScript"> var Xcursor=0 var Ycursor=0 if(document.layers)document.captureEvents(Event.MOUSEMOVE) document.onmousemove = handleMousemove function handleMousemove(e){ Xcursor = (document.layers)?e.pageX:event.x Ycursor = (document.layers)?e.pageY:event.y } function MovingObject(obj,img) { if(this.NN=document.layers)this.obj=eval("document."+obj) if(this.IE=document.all)this.obj=eval("document.all."+obj+".style") this.img = (this.IE)?eval("document.all."+img):eval("document."+obj+".document."+img) this.chase = Chase } function Chase( x, y ) { dx=50+(this.IE)?x-this.obj.pixelLeft:x-this.obj.left dy=50+(this.IE)?this.obj.pixelTop-y:this.obj.top-y distance=Math.sqrt(dxdx+dydy)/10 if(dx==0) angle=Math.PI((dy>0)?.5:1.5) else angle=Math.atan(dy/dx)+(Math.PI((dx<0)?1 dy<0)?2:0)) xstep = distanceMath.cos(angle) ystep = -distanceMath.sin(angle) if( Math.abs(dx) >= 10 ) (this.IE)?this.obj.pixelLeft+=xstep:this.obj.left+=xstep if( Math.abs(dy) >= 10 ) (this.IE)?this.obj.pixelTop+=ystep:this.obj.top+=ystep this.img.src=chaserorb[Math.floor(180/15angle/Math.PI)].src } function chaseCursor() { s1.chase(Xcursor,Ycursor) setTimeout("chaseCursor()", 35) } function initialize() { chaserorb = new Array() for(i=0; i<24; i++) { chaserorb[i]=new Image chaserorb[i].src="cursorchaser_orb"+i15+".gif" } s1 = new MovingObject("chaserDiv","chaserorbimage") chaseCursor() } onload=initialize </script> <style type='text/css'> #chaserDiv { position:absolute; left:0px; top:0px; } </style> </head> <body background="cursorchaser_grid.gif"> <table width=320 border=0 cellpadding=5 cellspacing=0 style="background-color: #999999"><tr><td><h2>Chaser Demo: Final version with Image Swapping</h2></td></tr></table> <DIV ID="chaserDiv"><img src="cursorchaser_blank.gif" name="chaserorbimage" width=20 height=20 border=0 alt=""></DIV> </body> </html> I just changed this line: chaserorb[i].src="cursorchaser_orb"+i*15+".gif" into: chaserorb[i].src="animatedgif.gif"
mr.maX Maniac (V) Mad Scientist From: Belgrade, Serbia Insane since: Sep 2000	posted 04-22-2001 22:55 It won't work that way. You have to create separate images for each angle (increased by 15 degrees). Like this: cursorchaser_orb0.gif cursorchaser_orb15.gif cursorchaser_orb30.gif cursorchaser_orb45.gif . . . cursorchaser_orb345.gif You have a complete list of images at this page http://www.gurusnetwork.com/tutorials/dhtml/cursorchaser/cursorchaser1.html
Bugimus Maniac (V) Mad Scientist From: New California Insane since: Mar 2000	posted 04-24-2001 02:17 Hey! That's my tute! Cool. Anyways, mr.maX is quite right of course. You know that switching all the images for each 15 degree angle was just an added feature. If you just want one animated gif moving around then this code should do the trick: <html> <head> <STYLE TYPE="text/css"> <!-- body { font-size:10px; color:#000000; font-family: verdana; } b { font-size:10px; color:#000000; font-family: verdana; font-weight: bold;} p { font-size:10px; color:#000000; font-family: verdana; } br { font-size:10px; color:#000000; font-family: verdana; } TD { font-size:10px; color:#000000; font-family: verdana;} H1 { font-size:14px; color:#000000; font-family: verdana; } H2 { font-size:12px; color:#000000; font-family: verdana; } TH { font-size:12px; color:#000000; font-family: verdana; } a{ text-decoration: none; color: #0000d9; } a:visited{ text-decoration: none; color: #000000; } a:hover{ text-decoration: none; color: #000000; background-color:#F0F0F8; } //--> </STYLE> <script language="JavaScript"> var Xcursor=0 var Ycursor=0 if(document.layers)document.captureEvents(Event.MOUSEMOVE) document.onmousemove = handleMousemove function handleMousemove(e){ Xcursor = (document.layers)?e.pageX:event.x Ycursor = (document.layers)?e.pageY:event.y } function MovingObject(obj,img) { if(this.NN=document.layers)this.obj=eval("document."+obj) if(this.IE=document.all)this.obj=eval("document.all."+obj+".style") this.img = (this.IE)?eval("document.all."+img):eval("document."+obj+".document."+img) this.chase = Chase } function Chase( x, y ) { dx=50+(this.IE)?x-this.obj.pixelLeft:x-this.obj.left dy=50+(this.IE)?this.obj.pixelTop-y:this.obj.top-y distance=Math.sqrt(dxdx+dydy)/10 if(dx==0) angle=Math.PI((dy>0)?.5:1.5) else angle=Math.atan(dy/dx)+(Math.PI((dx<0)?1dy<0)?2:0)) xstep = distanceMath.cos(angle) ystep = -distanceMath.sin(angle) if( Math.abs(dx) >= 10 ) (this.IE)?this.obj.pixelLeft+=xstep:this.obj.left+=xstep if( Math.abs(dy) >= 10 ) (this.IE)?this.obj.pixelTop+=ystep:this.obj.top+=ystep // this line no longer makes sense for just one image // this.img.src=chaserorb[Math.floor(180/15angle/Math.PI)].src } function chaseCursor() { s1.chase(Xcursor,Ycursor) setTimeout("chaseCursor()", 35) } function initialize() { // these next lines aren't needed for one just image // chaserorb = new Array() // for(i=0; i<24; i++) { // chaserorb[i]=new Image // chaserorb[i].src="cursorchaser_orb"+i15+".gif" // } s1 = new MovingObject("chaserDiv","chaserorbimage") chaseCursor() } onload=initialize </script> <style type='text/css'> #chaserDiv { position:absolute; left:0px; top:0px; } </style> </head> <body background="cursorchaser_grid.gif"> <table width=320 border=0 cellpadding=5 cellspacing=0 style="background-color: #999999"><tr><td><h2>Chaser Demo: Final version with Image Swapping</h2></td></tr></table> <DIV ID="chaserDiv"><img src="animatedgif.gif" name="chaserorbimage" width=20 height=20 border=0 alt=""></DIV> </body> </html> When you get the page published I would be very interested to see it. Let us know when it's done.
Copycat Nervous Wreck (II) Inmate From: Belgium Insane since: Apr 2001	posted 04-26-2001 21:46 Again thanks for the reply. I thought it would be too simple just to change the filename. I'll try it out this weekend. And about seeing my page when it's published ...hmm... i think it will be rather amateurish (except for the stuff i "borrowed" from Ozone) in comparison with the pages i've seen here.

Preserved Topic: mouse effect\$

Author

Thread

Copycat
Nervous Wreck (II) Inmate

From: Belgium
Insane since: Apr 2001

posted 04-19-2001 20:09

i just want to know how to make a mouse effect like you can see in these pages: http://www.ozones.com/splatter.html and http://www.ozones.com/blueprint.html.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 04-20-2001 18:52

Thats more code than I feel like typing but here's the basics

You need to obviously track the MousePos
you can do that like this:
(there is diferent code for each browser so it's a pain)
if (ie

Copycat
Nervous Wreck (II) Inmate

From: Belgium
Insane since: Apr 2001

posted 04-21-2001 15:23

Thanks for the help and reply

Copycat
Nervous Wreck (II) Inmate

From: Belgium
Insane since: Apr 2001

posted 04-21-2001 15:37

I tried to put an animated gif in the code but when i look at the result, i can see the gif but it is not animated. What can be the problem?

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted 04-21-2001 22:55

What is the URL of that problematic page (we have to see it before we can make any comments)?

Copycat
Nervous Wreck (II) Inmate

From: Belgium
Insane since: Apr 2001

posted 04-22-2001 13:40

The site is not published yet, but here is the code (it's from a guru's network tutorial):

<html>
<head>
<STYLE TYPE="text/css">

</STYLE>

<script language="JavaScript">
var Xcursor=0
var Ycursor=0
if(document.layers)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = handleMousemove
function handleMousemove(e){
Xcursor = (document.layers)?e.pageX:event.x
Ycursor = (document.layers)?e.pageY:event.y
}
function MovingObject(obj,img) {
if(this.NN=document.layers)this.obj=eval("document."+obj)
if(this.IE=document.all)this.obj=eval("document.all."+obj+".style")
this.img = (this.IE)?eval("document.all."+img):eval("document."+obj+".document."+img)
this.chase = Chase
}
function Chase( x, y ) {
dx=50+(this.IE)?x-this.obj.pixelLeft:x-this.obj.left
dy=50+(this.IE)?this.obj.pixelTop-y:this.obj.top-y
distance=Math.sqrt(dx*dx+dy*dy)/10
if(dx==0) angle=Math.PI*((dy>0)?.5:1.5)
else angle=Math.atan(dy/dx)+(Math.PI*((dx<0)?1 dy<0)?2:0))
xstep = distance*Math.cos(angle)
ystep = -distance*Math.sin(angle)
if( Math.abs(dx) >= 10 ) (this.IE)?this.obj.pixelLeft+=xstep:this.obj.left+=xstep
if( Math.abs(dy) >= 10 ) (this.IE)?this.obj.pixelTop+=ystep:this.obj.top+=ystep
this.img.src=chaserorb[Math.floor(180/15*angle/Math.PI)].src
}
function chaseCursor() {
s1.chase(Xcursor,Ycursor)
setTimeout("chaseCursor()", 35)
}
function initialize() {
chaserorb = new Array()
for(i=0; i<24; i++) {
chaserorb[i]=new Image
chaserorb[i].src="cursorchaser_orb"+i*15+".gif"
}
s1 = new MovingObject("chaserDiv","chaserorbimage")
chaseCursor()
}
onload=initialize
</script>

<style type='text/css'>
#chaserDiv { position:absolute; left:0px; top:0px; }
</style>

</head>

<body background="cursorchaser_grid.gif">
<table width=320 border=0 cellpadding=5 cellspacing=0 style="background-color: #999999"><tr><td><h2>Chaser Demo: Final version with Image Swapping</h2></td></tr></table>
<DIV ID="chaserDiv"><img src="cursorchaser_blank.gif" name="chaserorbimage" width=20 height=20 border=0 alt=""></DIV>
</body>
</html>

I just changed this line: chaserorb[i].src="cursorchaser_orb"+i*15+".gif"
into: chaserorb[i].src="animatedgif.gif"

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted 04-22-2001 22:55

It won't work that way. You have to create separate images for each angle (increased by 15 degrees). Like this:

cursorchaser_orb0.gif
cursorchaser_orb15.gif
cursorchaser_orb30.gif
cursorchaser_orb45.gif
.
.
.
cursorchaser_orb345.gif

You have a complete list of images at this page http://www.gurusnetwork.com/tutorials/dhtml/cursorchaser/cursorchaser1.html

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

posted 04-24-2001 02:17

Hey! That's my tute! Cool.

Anyways, mr.maX is quite right of course. You know that switching all the images for each 15 degree angle was just an added feature. If you just want one animated gif moving around then this code should do the trick:

<html>
<head>
<STYLE TYPE="text/css">

</STYLE>

<script language="JavaScript">
var Xcursor=0
var Ycursor=0
if(document.layers)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = handleMousemove
function handleMousemove(e){
Xcursor = (document.layers)?e.pageX:event.x
Ycursor = (document.layers)?e.pageY:event.y
}
function MovingObject(obj,img) {
if(this.NN=document.layers)this.obj=eval("document."+obj)
if(this.IE=document.all)this.obj=eval("document.all."+obj+".style")
this.img = (this.IE)?eval("document.all."+img):eval("document."+obj+".document."+img)
this.chase = Chase
}
function Chase( x, y ) {
dx=50+(this.IE)?x-this.obj.pixelLeft:x-this.obj.left
dy=50+(this.IE)?this.obj.pixelTop-y:this.obj.top-y
distance=Math.sqrt(dx*dx+dy*dy)/10
if(dx==0) angle=Math.PI*((dy>0)?.5:1.5)
else angle=Math.atan(dy/dx)+(Math.PI*((dx<0)?1dy<0)?2:0))
xstep = distance*Math.cos(angle)
ystep = -distance*Math.sin(angle)
if( Math.abs(dx) >= 10 ) (this.IE)?this.obj.pixelLeft+=xstep:this.obj.left+=xstep
if( Math.abs(dy) >= 10 ) (this.IE)?this.obj.pixelTop+=ystep:this.obj.top+=ystep

// this line no longer makes sense for just one image
// this.img.src=chaserorb[Math.floor(180/15*angle/Math.PI)].src

}
function chaseCursor() {
s1.chase(Xcursor,Ycursor)
setTimeout("chaseCursor()", 35)
}
function initialize() {

// these next lines aren't needed for one just image
// chaserorb = new Array()
// for(i=0; i<24; i++) {
// chaserorb[i]=new Image
// chaserorb[i].src="cursorchaser_orb"+i*15+".gif"
// }

s1 = new MovingObject("chaserDiv","chaserorbimage")
chaseCursor()
}
onload=initialize
</script>

<style type='text/css'>
#chaserDiv { position:absolute; left:0px; top:0px; }
</style>

</head>

<body background="cursorchaser_grid.gif">
<table width=320 border=0 cellpadding=5 cellspacing=0 style="background-color: #999999"><tr><td><h2>Chaser Demo: Final version with Image Swapping</h2></td></tr></table>
<DIV ID="chaserDiv"><img src="animatedgif.gif" name="chaserorbimage" width=20 height=20 border=0 alt=""></DIV>
</body>
</html>

When you get the page published I would be very interested to see it. Let us know when it's done.

Copycat
Nervous Wreck (II) Inmate

From: Belgium
Insane since: Apr 2001

posted 04-26-2001 21:46

Again thanks for the reply.
I thought it would be too simple just to change the filename.
I'll try it out this weekend.

And about seeing my page when it's published ...hmm... i think it will be rather amateurish (except for the stuff i "borrowed" from Ozone) in comparison with the pages i've seen here.