Tracers from your mouse on the webpage??????

sknyppy · May 19, 1999

How is this done?

robherc · May 19, 1999

I heavn't seen this done yet myself, but if you give me the URL of a site that you saw what you are wanting on I'm sure I can figure out how they did it, then tinker around with it until I can make it work for your site. 
 
 
-Robherc 
 
robherc@netzero.net

sknyppy · May 20, 1999

This site has those cool mouse tracers.

http://www.philips.com

-sknyppy

robherc · May 20, 1999

Here's all I could find on their site that seems to relate to the mouse trails; please let me know if it works: 
 
 
<html> 
<head> 
<style><!-- 
#trailsprite1 { position: absolute; z-index: 100; top: 1px; left: 0px; width: 10px; height: 10px; visibility: visible } 
#trailsprite2 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible } 
#trailsprite3 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible } 
#trailsprite4 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible } 
#trailsprite5 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible } 
#trailsprite6 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible } 
</style> 
</head> 
<body> 
<DIV id="trailSprite1"><IMG src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite1img"></DIV><DIV id="trailSprite2"><IMG src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite2img"></DIV><DIV id="trailSprite3"><IMG src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite3img"></DIV><DIV id="trailSprite4"><IMG src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite4img"></DIV><DIV id="trailSprite5"><IMG src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite5img"></DIV><DIV id="trailSprite6"><IMG src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite6img"></DIV> 
</body> 
</html> 
 
I hope you are able to use this (Oh, and the "<div>" tags and the data between them was all RIGHT under the "<body>" tag, it might not work if they are located further down in the code; I'm just not sure) 
 
 
-Robherc

robherc · May 20, 1999

Oops, don't bother; I tried it out on a page on my own system & it didn't work at all. I'll try downloading the entire source for the Philops page so I can search it more throughly for whatever JavaScript is involved in this; I have a feeling that it is probably a pretty complicated one, but only time will tell. 
Sorry I couldn't deliver a working solution on the first try; but sometimes thatt's how it goes with JS. 
 
-Robherc

grebo · May 21, 1999

Well, I'm not sure if this will help or not, but it seems as though it may have some similar functions to tracing the mouse movement. I found a script at The JavaScript Source at

http://javascript.internet.com/miscellaneous/eyes.html

in which a pair of eyes follow your mouse around the screen. The code (and installation) is as follows: 
 
 
 
 
 
<HEAD> 
 
<SCRIPT LANGUAGE=JavaScript1.2> 
 
<!-- Original:

http://www.bright.net/~flounder

--> 
 
 
<!-- The JavaScript Source!!

http://javascript.internet.com

--> 
 
<!-- Begin 
var x, y; 
var LastEvent = new Event; 
var EYESWIDTH = 50; 
var EYESHEIGHT = 14; 
var PUPIL_OFFSETX = 5; 
var PUPIL_OFFSETY = 5; 
var R = 5; 
function myMouseMove(e) { 
LastEvent = e; 
EYE1_OFFSETX = document.layers.EYES.left+EYESWIDTH/4; 
EYE1_OFFSETY = document.layers.EYES.top+EYESHEIGHT/2; 
EYE2_OFFSETX = document.layers.EYES.left+EYESWIDTH/4*3; 
EYE2_OFFSETY = document.layers.EYES.top+EYESHEIGHT/2; 
calcNewOffset(e.pageX, e.pageY, EYE1_OFFSETX, EYE1_OFFSETY, R); 
document.layers.PUPIL1.moveTo(x, y); 
calcNewOffset(e.pageX, e.pageY, EYE2_OFFSETX, EYE2_OFFSETY, R); 
document.layers.PUPIL2.moveTo(x, y); 
var retval = routeEvent(e); 
if (retval == false) return false; 
else return true; 
} 
function calcNewOffset(px, py, EYE_OFFSETX, EYE_OFFSETY, R){ 
var x2, y2, m; 
y2 = (py - EYE_OFFSETY); 
x2 = (px - EYE_OFFSETX); 
if (x2==0) 
x2=0.0000001; //prevent infinity 
r = Math.sqrt(x2*x2+y2*y2); 
if (r<=R) { 
x = Math.round(px - PUPIL_OFFSETX); 
y = Math.round(py - PUPIL_OFFSETY); 
return; 
} 
m = Math.abs(y2/x2); 
x = Math.sqrt(R*R/(1+m*m)); 
y = m*x; 
if (x2<0) x = -x; 
if (y2<0) y = -y; 
x = x + EYE_OFFSETX - PUPIL_OFFSETX; 
y = y + EYE_OFFSETY - PUPIL_OFFSETY; 
x = Math.round(x); 
y = Math.round

; 
} 
function myLoad() { 
EYE1_OFFSETX = document.layers.EYES.left+EYESWIDTH/4; 
EYE1_OFFSETY = document.layers.EYES.top+EYESHEIGHT/2; 
EYE2_OFFSETX = document.layers.EYES.left+EYESWIDTH/4*3; 
EYE2_OFFSETY = document.layers.EYES.top+EYESHEIGHT/2; 
document.layers.PUPIL1.moveTo(EYE1_OFFSETX, EYE1_OFFSETY); 
document.layers.PUPIL2.moveTo(EYE2_OFFSETX, EYE2_OFFSETY); 
window.onMouseMove=myMouseMove; 
window.captureEvents(Event.MOUSEMOVE); 
// setTimeout("moveEyesTimer()", 10); 
} 
function moveEyesTimer() { 
var Dy, Dx, dist; 
dist = Math.sqrt(Math.pow((document.layers.EYES.left+EYESWIDTH/2-LastEvent.pageX),2) + 
Math.pow((document.layers.EYES.top+EYESHEIGHT/2-LastEvent.pageY),2)); 
Dx = Math.round(3*(document.layers.EYES.left+EYESWIDTH/2-LastEvent.pageX)/dist); 
Dy = Math.round(3*(document.layers.EYES.top+EYESHEIGHT/2-LastEvent.pageY)/dist); 
if (Math.abs(dist)<=5){ 
Dx = 0; 
DY = 0; 
} 
document.layers.EYES.left -= Dx; 
document.layers.EYES.top -= Dy; 
myMouseMove(LastEvent); 
setTimeout("moveEyesTimer()", 10); 
} 
// End --> 
</SCRIPT> 
</HEAD> 
 
 
 
<BODY onLoad="myLoad()"> 
 
 
 
<CENTER> 
<LAYER ID=EYES> 
<IMG SRC=

http://yoursite.com/your-img-directory/eyes.gif>

</LAYER> 
<LAYER ID=PUPIL1> 
<IMG SRC=

http://yoursite.com/your-img-directory/pupil.gif>

</LAYER> 
<LAYER ID=PUPIL2> 
<IMG SRC=

http://yoursite.com/your-img-directory/pupil.gif>

</LAYER>

http://javascript.internet.com/img/eyes/eyes.gif

http://javascript.internet.com/img/eyes/pupil.gif

I hope this helps somewhat (even if it is a little unrelated) 
-Grebo

robherc · May 21, 1999

Grebo- 
Accchhh!!!! You found a BIG ONE that time Grebo! I'll try to sort through this script to find out exactly which parts are involved in tracing the mouse motion; maybe comparing it to the JavaScript on the philips page will help. 
 
 
Sknyppy- 
I'll try to sort through these JavaScripts to find the important parts for you as soon as possible, but I'm afraid this one might tae a little while. 
 
 
 
-Robherc

grebo · Jul 9, 1999

OK, This time, I won't post the code... However, I will post the URL:

http://javascript.internet.com/games/ants.html

It's not quite the same as the Phillips page, but it is similar. Maybe this will help all of you in your quest for tracers... 
 
-Grebo

robherc · Jul 16, 1999

Sorry I haven't been in for soooo long; I'm really busy with a COUPLE of jobs right now, so my JS adventures have temporarily come to an end; I'm REALLY sorry I wasn't able to be of any more help. 
 
 
-Robherc 
robherc@netzero.net

TheOrange · Jul 19, 1999

I know how to trace the mouse, it depends on if you use IE or Netscape, you'll have to use different JS operations for each. I wrote a function to trace where the mouse is then create a image at that point when the mouse is clicked (approprately named dartToss). Here is the code of the function, if you want to see it in action goto

http://www.reed.edu/~snichols/fml/

and click on the large imagemap a couple of times (only works in Netscape so far). Pay special attention to the moveToAbsolute. 
 
var cdarts = 7; 
var wdarts = 12; 
function dartToss (answerCheck,evt,wrongBox,sHint,sAnswer) { //VERY layer dependent, if change layers, change numbers 
if (answerCheck == 1) { 
parent.lFrame.document.layers[cdarts].moveToAbsolute(evt.layerX - 9, evt.layerY - 5); 
parent.lFrame.document.layers[cdarts].visibility = "visible"; 
cdarts ++; 
for (cLayers = 0; cLayers < 7; cLayers++) //change accordingly at cLayers < # 
parent.lFrame.document.layers[cLayers].visibility = "hidden"; 
parent.lFrame.document.cssBox1c.visibility = "visible"; 
parent.lFrame.document.bigCircle.visibility = "visible"; 
parent.lFrame.document.rBox.visibility = "visible"; 
if (cdarts == 12) 
cdarts = 7; 
 
} 
if (answerCheck != 1) { 
parent.lFrame.document.layers[wdarts].moveTo(evt.layerX - 9, evt.layerY - 5); 
parent.lFrame.document.layers[wdarts].visibility = "visible"; 
wdarts ++; 
while (wrongBox > 0) { 
for (cLayers = 0; cLayers < 7; cLayers++) //change accordingly at cLayers < # 
parent.lFrame.document.layers[cLayers].visibility = "hidden"; 
parent.lFrame.document.layers[wrongBox + 1].visibility = "visible"; 
wrongBox = 0; 
} 
if (wdarts == 17) 
wdarts = 12; 
} 
if (sHint == 1) { 
for (cLayers = 0; cLayers < 6; cLayers++) //change accordingly at cLayers < # 
parent.lFrame.document.layers[cLayers].visibility = "hidden"; 
parent.lFrame.document.hintBox1.visibility = "visible"; 
} 
if (sAnswer == 1) { 
parent.lFrame.document.bigCircle.visibility = "visible"; 
} 
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Tracers from your mouse on the webpage??????

sknyppy

Programmer

robherc

Programmer

sknyppy

Programmer

robherc

Programmer

robherc

Programmer

grebo

Programmer

robherc

Programmer

grebo

Programmer

robherc

Programmer

TheOrange

Programmer

Similar threads

Part and Inventory Search

Sponsor