Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating Animated Eyes Using JavaScript

Author: DevASP
Download Source Code : 558_WatchUser.zip

This article is about how you make your visitors feel like they're being watched not actually but just a feel. A happy face with eyes will follow the mouse.

Steps you will do. 

Start visual studio and create a new web application. 

Add a new JavaScript file to you project or include it in your application from the attached application. 

Also download the image attached with the application to make a face having eyes to see the users. 

Add the following JavaScript code to the JavaScript file.

 

var jseyesimg="jseyes.gif";

var jseyeimg="jseyeblue.gif";

var jseyeslink="http://www.wsabstract.com";

 

var jseyeso=null, jseye1=null, jseye2=null;

 

var browserversion=0.0;

var browsertype=0;

 

 

function browserdetect() {

  var agt= navigator.userAgent.toLowerCase();

  var appVer= navigator.appVersion.toLowerCase();

  browserversion= parseFloat(appVer);

  var iePos= appVer.indexOf('msie');

  if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(';',iePos)));

  var nav6Pos = agt.indexOf('netscape6');

  if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))

  browsertype= (iePos!=-1) ? 1 : (agt.indexOf('mozilla')!=-1) ? 2 : 0;

  return(browsertype>0);

}

 

browserdetect();

 

 

function jseyesobj(id) {

  var i, x;

  x= document[id];

  if (!x && document.all) x= document.all[id];

  for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];

  if (!x && document.getElementById) x= document.getElementById(id);

  return(x);

}

 

 

function jseyesmove(x, y) {

  var ex, ey, dx, dy;

  if (jseyeso && jseye1 && jseye2 && jseyeso.style) {

    ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;

    dx=x-ex; dy=y-ey;

    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));

    jseye1.style.left= r*dx+36.5; jseye1.style.top= r*dy+44;

    ex+=56; dx-=56;

    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));

    jseye2.style.left= r*dx+92.5; jseye2.style.top= r*dy+44;

  }

}

 

 

 

function jseyes() {

  var img;

  var x, y, a=false;

 

  if (arguments.length==2) {

    x= arguments[0];

    y= arguments[1];

    a= true;

  }

 

  if (browsertype>0 && browserversion>=5) {

 

    img= "<div id='jseyeslayer' style='position:"+

           (a ? "absolute; left:"+x+"; top:"+y : "relative")+

           "; z-index:5; width:150; height:150 overflow:hidden'>"+

           "<div id='jseye1' style='position:absolute; left:36; top:44; z-index:6; width:21; height:29'>"+

             "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+

           "</div>"+

           "<div id='jseye2' style='position:absolute; left:92; top:44; z-index:6; width:21; height:29'>"+

             "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+

           "</div>"+

           "<img src='"+jseyesimg+"' width=150 height=150 onClick=\"location.href='"+jseyeslink+"'\">"+

       "</div>";

    document.write(img);

    jseyeso=jseyesobj('jseyeslayer');

    jseye1=jseyesobj('jseye1');

    jseye2=jseyesobj('jseye2');

 

    switch (browsertype) {

      case 1:

        document.onmousemove=jseyesmousemoveIE;

      break;

      case 2:

        document.captureEvents(Event.MOUSEMOVE);

      document.onmousemove=jseyesmousemoveNS;

      break;

    }

  }

}

 

 

 

function jseyesmousemoveNS(e) {

  jseyesmove(e.pageX, e.pageY); 

}

 

function jseyesmousemoveIE() {

  jseyesmove(event.clientX+document.body.scrollLeft, event.clientY+document.body.scrollTop);

}

 

 

Now add the following scripting tag to call the JavaScript functions written in the file.

 

<script src="jseyes.js"></script>

 

 

Add the following HTML code that will design your web page.

 

<body MS_POSITIONING="GridLayout" bgcolor=#009999>

 

    <form id="Form1" method="post" runat="server">

      <center>

      <H4>Am watching you.....</H4>

      <vr>

      <H4>Dont forget to visit www.devasp.com</H4>

      <a href="http://www.devasp.com">Devasp Team</a>

      </center>

    </form>

 

</body>

 

Run your application and move your pointer here and there, see the image it will move the eyes with the movement of mouse.

Article Comments
Creating Animated Eyes Using JavaScript

Posted on 4/6/2007 2:50:27 AM by Senthil Kumar

thisis very good method i hope it will help us

Posted on 4/29/2007 12:38:51 AM by nagabhushanam

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Randomly Letter color change Using JavaScript

Disclaimer - Privacy
© 2002-2017 DevASP.net