Your browser does not support the video tag or the file format of this video. http://www.webestools.com/

HOMEPAGE     LINKS     METALWORK     GAMES     CUSTOM BIKES     ENGINEERING VIDEOS    

CLUB CAFE    MUSIC   CODES     EXIT

FLIPBOOKS(3):-   LINKS     PHOTO'S     A.I.

Navigation

  • Background Photo Multiples
  • Redirect page
  • Google translate
  • Add music bar
  • Add video to website
  • Add single photo to background
  • Video Full Background
  • Background Colour Changer
  • Enlarge photo on mouseover
  • Photo Change on Mouseover
  • Round and Centre
  • Round
  • Centre
  • Favicon
  • Snow effect code
  • Steel Prices
  • Flip Page Example Code
  • Pop up on exit
  • Change link to embed
  • Fireworks Using YouTube
  • Leaves Falling
  • Airborne Text
  • Virus Attack Simulation
  • Snow Flakes
  • Star Warp
  • Site within a Site
  • Image On Top
  • Eye Rolling Code
  • .
  • .

What is the code to get eyes on a photo on website page to follow mouse


<script type="text/javascript">
// <![CDATA[
var width=144; // radius of the eyes in pixels
var colour="#06c"; // colour of the eye - bluey green in this case
var iris="#111"; //   colour of the iris (normally black);

/***************************\
*   Moving Eyeballs Effect  *
*(c)2012-20 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var swide=800;
var shigh=600;
var sleft=sdown=0;

var glasses, lefteyeball, righteyeball, lefteye, righteye;

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(draw_eyes);

function draw_eyes() {
  var i, j, l, r;
  glasses=document.createElement("div");
  i=glasses.style;
  i.position="fixed";
  i.top="50%";
  i.left="50%";
  i.width="1px";
  i.height="1px";
  i.overflow="visible";
  i.zIndex="100";
  i.pointerEvents="none";
  document.body.appendChild(glasses);
  lefteyeball=document.createElement("div");
  righteyeball=document.createElement("div");
  i=lefteyeball.style;
  j=righteyeball.style;
  i.position=j.position="absolute";
  i.width=j.width=(width*2)+"px";
  i.height=j.height=(width*2)+"px";
  i.top=j.top=(-width)+"px";
  i.left=(-2.1*width)+"px";
  j.left=(.1*width)+"px";
  i.borderRadius=j.borderRadius="50%";
  i.backgroundColor=j.backgroundColor=colour;
  i.background=j.background="radial-gradient(circle at "+width+"px "+width+"px, #fff, "+colour+" 75%)";
  i.opacity=j.opacity="0.5";
  i.zIndex=j.zIndex="100";
  glasses.appendChild(lefteyeball);
  glasses.appendChild(righteyeball);
  lefteye=document.createElement("div");
  righteye=document.createElement("div");
  i=lefteye.style;
  j=righteye.style;
  i.position=j.position="absolute";
  i.width=j.width=width+"px";
  i.height=j.height=width+"px";
  i.top=j.top=(-width/2)+"px";
  i.left=(-1.6*width)+"px";
  j.left=(.6*width)+"px";
  i.borderRadius=j.borderRadius="50%";
  i.backgroundColor=j.backgroundColor=iris;
  i.opacity=j.opacity="0.8";
  i.zIndex=j.zIndex="101";
  glasses.appendChild(lefteye);
  glasses.appendChild(righteye);
  set_width();
  set_scroll();
}


document.onmousemove=mouse;
function mouse(e) {
  var x, y, xdiff, ydiff, distn;

  y=(e)?e.pageY:event.y;
  x=(e)?e.pageX:event.x;
  x-=sleft;
  y-=sdown;

  xdiff=x+(1.1*width)-(swide*0.5);
  ydiff=y-shigh/2;
  distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
  if (distn>width/2.5) {
    xdiff=xdiff*width/distn/2.5;
    ydiff=ydiff*width/distn/2.5;
  }
  lefteye.style.top=(ydiff-width/2)+"px";
  lefteye.style.left=(xdiff-1.6*width)+"px";

  xdiff=x-(1.1*width)-(swide*0.5);
  ydiff=y-shigh/2;
  distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
  if (distn>width/2.5) {
    xdiff=xdiff*width/distn/2.5;
    ydiff=ydiff*width/distn/2.5;
  }
  righteye.style.top=(ydiff-width/2)+"px";
  righteye.style.left=(xdiff+0.6*width)+"px";
}

document.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>

 
 
 
 
 

This is a simple Background image and will be repeated

javascript snowHtml Codes