Mega Code Archive

 
Categories / JavaScript DHTML / GUI Components
 

Big static eyes

//Static Eyes - http://www.btinternet.com/~kurt.grigg/javascript  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Big Static Eyes</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .eyestyle{ text-align : center; margin-left : auto; margin-right : auto; } //--> </style> </head> <body> <p>DON'T FORGET - DO NOT PUT INSIDE ANY OTHER DIV!</p> <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p> <script type="text/javascript"> //Static Eyes - http://www.btinternet.com/~kurt.grigg/javascript  if  ((document.getElementById) &&  window.addEventListener || window.attachEvent){ (function(){ var e_img = new Image(); e_img.src = "bigeye.gif";  var p_img = new Image(); p_img.src = "bigpupil.gif"; var d = document; var pix = "px"; var idx = document.images.length; if (document.getElementById("cont"+idx)) idx++; var eyeballs = ""; var pupil1 = ""; var pupil2 = ""; d.write('<div id="cont'+idx+'" class="eyestyle" style="height:102px;width:205px">' +'<div id="eyblls'+idx+'" style="position:relative;width:205px;height:102px"><img src="'+e_img.src+'" alt=""/>' +'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:37px;left:37px;width:27px;height:27px"/>' +'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:37px;left:140px;width:27px;height:27px"/>' +'<\/div><\/div>'); function watchTheMouse(y,x){ var osy = eyeballs.offsetTop; var osx = eyeballs.offsetLeft; var c1y = osy + 51; var c1x = osx + 51; var c2y = osy + 51; var c2x = osx + 154; var dy1 = y - c1y; var dx1 = x - c1x; var d1 = Math.sqrt(dy1*dy1 + dx1*dx1); var dy2 = y - c2y; var dx2 = x - c2x; var d2 = Math.sqrt(dy2*dy2 + dx2*dx2); var ay1 = y - c1y; var ax1 = x - c1x; var angle1 = Math.atan2(ay1,ax1)*180/Math.PI; var ay2 = y - c2y; var ax2 = x - c2x; var angle2 = Math.atan2(ay2,ax2)*180/Math.PI; var dv = 1.36; var onEyeBall1 = (d1 < 51)?d1/dv:37; var onEyeBall2 = (d2 < 51)?d2/dv:37; pupil1.top = c1y-13+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix; pupil1.left = c1x-13+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix; pupil2.top = c2y-13+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix; pupil2.left = c2x-13+onEyeBall2  *Math.cos(angle2*Math.PI/180)-osx+pix; } function mouse(e){ var y,x; if (!e) e = window.event;      if (typeof e.pageY == 'number'){   y = e.pageY;   x = e.pageX;  }  else{  var ref = document.documentElement||document.body;  y = e.clientY + ref.scrollTop;  x = e.clientX + ref.scrollLeft; } watchTheMouse(y,x); } function init(){ eyeballs = d.getElementById("eyblls"+idx); pupil1 = d.getElementById("ppl1"+idx).style; pupil2 = d.getElementById("ppl2"+idx).style; } if (window.addEventListener){  window.addEventListener("load",init,false);  document.addEventListener("mousemove",mouse,false); }   else if (window.attachEvent){  window.attachEvent("onload",init);  document.attachEvent("onmousemove",mouse); }  })(); }//End. </script> </body> </html>                          bigstaticeyes.zip( 6 k)