Eyes following the mouse using Javascript

Submitted by: 
Language: 
Visitors have accessed this post 2315 times.

In this tutorial, I am going to teach you how to make a xavier eye or eyes following the eye using javascript. Just follow the instructions below.

Instructions

Writing our javascript code and name it as jseyes.js

  1. /* jseyes.js
  2.  
  3.  
  4. The classic Xeyes in JavaScript
  5. (c) PROPIX Ltd, Written by Pintér Gábor
  6. Székesfehérvár, Kriványi u. 15.
  7. H-8000, HUNGARY
  8. Tel: +36 30 3489752
  9. Fax: +36 22 304326
  10. Email: <a href="mailto:[email protected]" rel="nofollow">[email protected]</a>
  11. Web: <a href="http://www.propix.hu
  12.  
  13. Revisions:
  14. " rel="nofollow">http://www.propix.hu
  15.  
  16. Revisions:
  17. </a> V1.0 10/14/2001 Original release
  18. V1.1 02/20/2008: Updated by JavaScriptKit.com to work in the latest browsers (IE7, FF etc)
  19.  
  20. Usage:
  21.   1. Include this file from the head of your page
  22.   2. Define parameters or accept the defaults
  23.   3. Insert the image
  24.  
  25. This script requires Internet Explorer 5+ or Nescape Navigator 6+! In other browsers it does nothing.
  26.  
  27.  
  28.  
  29. 1. Include jseyes.js from the head of your page
  30. Insert the following line into the head of your page:
  31.   <script src="jseyes.js"></script>
  32.  
  33.  
  34. 2. Define parameters
  35. You can accept the defaults or assign new values to these variables:
  36.  
  37. jseyesimg="jseyes.gif"
  38.   The main image. Please do not edit.
  39.  
  40. jseyeimg="jseyeblue.gif"
  41.   The image of the eye. Must be a 21x29 solid ellipse with transparent background.
  42.  
  43.  
  44. 4. Insert the image
  45. Call jseyes() where you want to see the image:
  46.   <script>
  47.   jseyes();
  48.   </script>
  49.  
  50. Or call jseyes(x, y) to show the image at absolute position:
  51.   <script>
  52.   jseyes(100,100);
  53.   </script>
  54.  
  55.  
  56.  
  57. Example: <a href="http://www.propix.hu/www/jseyes/jseyes.html
  58.  
  59. */
  60.  
  61.  
  62.  
  63.  
  64. //" rel="nofollow">http://www.propix.hu/www/jseyes/jseyes.html
  65.  
  66. */
  67.  
  68.  
  69.  
  70.  
  71. //</a> Defaults
  72. var jseyesimg="images/jseyes.gif";
  73. var jseyeimg="images/jseyeblue.gif";
  74. var jseyeslink="<a href="http://www.javascriptkit.com";
  75.  
  76.  
  77. //" rel="nofollow">http://www.javascriptkit.com";
  78.  
  79.  
  80. //</a> Internal
  81. var jseyeso=null, jseye1=null, jseye2=null;
  82. var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
  83.  
  84. // General utils
  85.  
  86. // Find object by name or id
  87. function jseyesobj(id) {
  88. var i, x;
  89. x= document[id];
  90. if (!x && document.getElementById) x= document.getElementById(id);
  91. for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
  92. return(x);
  93. }
  94.  
  95.  
  96. // Move eyes
  97. function jseyesmove(x, y) {
  98. var ex, ey, dx, dy;
  99. if (jseyeso && jseye1 && jseye2 && jseyeso.style) {
  100. ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;
  101. dx=x-ex; dy=y-ey;
  102. r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
  103. jseye1.style.left= r*dx+36.5+'px'; jseye1.style.top= r*dy+44+'px';
  104. ex+=56; dx-=56;
  105. r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
  106. jseye2.style.left= r*dx+92.5+'px'; jseye2.style.top= r*dy+44+'px';
  107. }
  108. }
  109.  
  110.  
  111.  
  112. // Main
  113. function jseyes() {
  114. var img;
  115. var x, y, a=false;
  116.  
  117. if (arguments.length==2) {
  118. x= arguments[0];
  119. y= arguments[1];
  120. a= true;
  121. }
  122.  
  123. img= "<div id='jseyeslayer' style='position:"+
  124. (a ? "absolute; left:"+x+"; top:"+y : "relative")+
  125. "; z-index:5; width:150; height:150 overflow:hidden'>"+
  126. "<div id='jseye1' style='position:absolute; left:36; top:44; z-index:6; width:21; height:29'>"+
  127. "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
  128. "</div>"+
  129. "<div id='jseye2' style='position:absolute; left:92; top:44; z-index:6; width:21; height:29'>"+
  130. "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
  131. "</div>"+
  132. "<img src='"+jseyesimg+"' width=150 height=150 onClick=\"location.href='"+jseyeslink+"'\">"+
  133. "</div>";
  134. document.write(img);
  135. jseyeso=jseyesobj('jseyeslayer');
  136. jseye1=jseyesobj('jseye1');
  137. jseye2=jseyesobj('jseye2');
  138.  
  139. document.onmousemove=jseyesmousemove;
  140. }
  141.  
  142.  
  143. // Mouse move events
  144.  
  145. function jseyesmousemove(e) {
  146. var mousex=(e)? e.pageX : event.clientX+standardbody.scrollLeft
  147. var mousey=(e)? e.pageY : event.clientY+standardbody.scrollTop
  148. jseyesmove(mousex, mousey);
  149. //return(false);
  150. }

Writing our html code
Note: Don't forget to link the javascript code named jseyes.js inside the head tag.

  1. <!DOCTYPE html>
  2.  
  3. Xavier Eye
  4.  
  5. <style type="text/css">
  6. #styl {
  7. float: left;
  8. margin-left: 580px;
  9. margin-top: 200px;
  10. }
  11.  
  12. <script src="js/jseyes.js"></script>
  13.  
  14. </head>
  15.  
  16.  
  17.  
  18. <div id="styl">
  19. <p>
  20. Move the cursor around into the<br /> image to see what the effect.
  21. </p>
  22. jseyes();
  23. </div>
  24.  
  25. </body>
  26.  
  27. </html>

Congratulations, you have finally created xavier eyes or eyes following mouse that you can use in your systems or projects. For comment and suggestions, feel free to comment below or email me at [email protected]


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.