JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Eyes!

Here is a great JavaScript version of the classic Windows "eyes" program - you know, the eyes follow your mouse around the screen? It's really cool! (Only works with Netscape 4.0+)


Insert into <HEAD>
<SCRIPT LANGUAGE=JavaScript1.2> <!-- Original: http://www.bright.net/~flounder --> <!-- 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/43; 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(x2x2+y2y2); if (r<=R) { x = Math.round(px - PUPIL_OFFSETX); y = Math.round(py - PUPIL_OFFSETY); return; } m = Math.abs(y2/x2); x = Math.sqrt(RR/(1+mm)); y = mx; 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(y); } 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/43; 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>

Insert into <BODY>
<!-- STEP TWO: Add the onLoad event handler to the BODY tag --> <BODY onLoad="myLoad()"> <!-- STEP THREE: Add this coding into the BODY of your HTML document --> <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>

Other Options