Guest_imported
New member
- Jan 1, 1970
- 0
Helle Everyone,
I am trying to build a page so when i move the mouse around on the page the set of eyes that i have on the page with follow the mouse around. The eyes are set up so there are pupils inside the eye. The pupils will move inside the eye when the mouse is moved around. Can anyone help me finish the code? I am not sure how to set up xdist, ydist, and the PUPIL_RADIUS correctly.
Thanks... Here is the code.
<html>
<head>
<title>New Page 1</title>
<script = "javascript1.2">
<!--
function Init()
{
document.onmousemove=MoveEyes;
document.captureEvents(Event.MOUSEMOVE);
}
function MoveEyes()
{
var dist;
var angle;
var radius;
var xoffset
var yoffset
var xdist = offsetx
var ydist = offsety
var PUPIL_RADIUS = 10
// Compute the straight-line distance from the center of the eye to the mouse.
dist = Math.sqrt( (xdist * xdist) + (ydist * ydist) );
// Compute the angle from the center of the eye to the mouse.
angle = Math.atan2(ydist, xdist);
// Don't let the pupil leave the eyeball.
radius = Math.min(dist, PUPIL_RADIUS);
// Figure out how much the pupil should be offset from the
// center of the eyeball.
xoffset = radius * Math.cos(angle);
yoffset = radius * Math.sin(angle);
}
//-->
</script>
</head>
<body>
<p>
<DIV ID = "pupil" STYLE = "position: absolute; left:37.5; top:32;">
<IMG SRC = "pupil.gif" onmousemove = "MoveEyes()">
</DIV>
<DIV ID = "pupil" STYLE = "position: absolute; left:62.5; top:32;">
<IMG SRC = "pupil.gif" onmousemove = "MoveEyes()">
</DIV>
<DIV ID = "eyes" STYLE = "position: absolute; left:30; top:30;">
<IMG SRC = "eyes.gif" width="50" height="25">
</DIV>
</body>
</html>
I am trying to build a page so when i move the mouse around on the page the set of eyes that i have on the page with follow the mouse around. The eyes are set up so there are pupils inside the eye. The pupils will move inside the eye when the mouse is moved around. Can anyone help me finish the code? I am not sure how to set up xdist, ydist, and the PUPIL_RADIUS correctly.
Thanks... Here is the code.
<html>
<head>
<title>New Page 1</title>
<script = "javascript1.2">
<!--
function Init()
{
document.onmousemove=MoveEyes;
document.captureEvents(Event.MOUSEMOVE);
}
function MoveEyes()
{
var dist;
var angle;
var radius;
var xoffset
var yoffset
var xdist = offsetx
var ydist = offsety
var PUPIL_RADIUS = 10
// Compute the straight-line distance from the center of the eye to the mouse.
dist = Math.sqrt( (xdist * xdist) + (ydist * ydist) );
// Compute the angle from the center of the eye to the mouse.
angle = Math.atan2(ydist, xdist);
// Don't let the pupil leave the eyeball.
radius = Math.min(dist, PUPIL_RADIUS);
// Figure out how much the pupil should be offset from the
// center of the eyeball.
xoffset = radius * Math.cos(angle);
yoffset = radius * Math.sin(angle);
}
//-->
</script>
</head>
<body>
<p>
<DIV ID = "pupil" STYLE = "position: absolute; left:37.5; top:32;">
<IMG SRC = "pupil.gif" onmousemove = "MoveEyes()">
</DIV>
<DIV ID = "pupil" STYLE = "position: absolute; left:62.5; top:32;">
<IMG SRC = "pupil.gif" onmousemove = "MoveEyes()">
</DIV>
<DIV ID = "eyes" STYLE = "position: absolute; left:30; top:30;">
<IMG SRC = "eyes.gif" width="50" height="25">
</DIV>
</body>
</html>