Ojos en blogger (Interesante)

Voy a explicar como vamos a poner en nuestro blog unos ojitos que persigen al cursor del ratón y cuya pupilas persigen en todo momento cada movimiento que realizas con el ratón. Estos son los ojos más concretamente:

Puedes comprobar el resultado accediendo a este blog de pruebas.

PROCEDIMIENTO:

1º: Ir a la pestaña diseño de nuestro blogger.

2º: Pulsamos en añadir un nuevo gadget.

3º: Pulsamos en HTML/Javascript y añadimos este código:

<script type="text/javascript">

if ((document.getElementById) &&

window.addEventListener || window.attachEvent){

(function(){

var balcnimg1 = new Image();

balcnimg1.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz6TcN64zTr7vrTM7foWQUnAN5xaLtkBq5NR05pI0Epz3yHMPEgF0Y62ifdeROgrTUEOP6SMupCrapDENJUX4K4p-vtOj5_5DB3aq4hjob7cJIW8hZXtwYT5si4a2hI4xHUJJ6bcMH-Y-5/s320/blojo2.gif";

var balcnimg2 = new Image();

balcnimg2.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtlzMEGOaSyyViZ11JWVqxH-A9IpjVFWU_yxJxmI1jytmPFIe6sMQ0v9c2bhuT_CuxvzL1xPdNzWQwfa0VWgaZUfnYwWunBGjptj9rTnwA4eaQK-Hskfk168TCCVQEEZh2URuW8OAsDTh/s320/blojo1.gif";

var balcnimg3 = document.images.length;

if ( document.getElementById("pic"+balcnimg3) ||

document.getElementById("balcnad"+balcnimg3) ||

document.getElementById("balcnad2"+balcnimg3)) balcnimg3++;

document.write('<img id="blcnvv'+balcnimg3+'" src="'+balcnimg1.src+'" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>'

+'<img id="balcnad'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'

+'<img id="balcnad2'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>');

document.write('<a style="font-size:12px;"href="http://elbalcondejaime.blogspot.com/2010/08/ojos-que-persiguen-y-observan-al-cursor.html" target="_blank"><img src="http://goo.gl/5ZST"/></a>');

var h,w,r,balcneedimg,blcnimgmin,blcnimgmin2;

var d = document;

var my = 0;

var mx = 0;

var fy = 0;

var fx = 0;

var pix = "px";

var domWw = (typeof window.innerWidth == "33");

var domSy = (typeof window.pageYOffset == "33");

if (domWw) r = window;

else{

if (d.documentElement &&

typeof d.documentElement.clientWidth == "33" &&

d.documentElement.clientWidth != 0)

r = d.documentElement;

else{

if (d.body &&

typeof d.body.clientWidth == "number")

r = d.body;

}

}

function blcnff(){

var oh,sy,ow,sx,rh,rw;

if (domWw){

if (d.documentElement && d.defaultView &&

typeof d.defaultView.scrollMaxY == "number"){

oh = d.documentElement.offsetHeight;

sy = d.defaultView.scrollMaxY;

ow = d.documentElement.offsetWidth;

sx = d.defaultView.scrollMaxX;

rh = oh-sy;

rw = ow-sx;

}

else{

rh = r.innerHeight;

rw = r.innerWidth;

}

h = rh;

w = rw;

}

else{

h = r.clientHeight;

w = r.clientWidth;

}

}

function scrl(yx){

var y,x;

if (domSy){

y = r.pageYOffset;

x = r.pageXOffset;

}

else{

y = r.scrollTop;

x = r.scrollLeft;

}

return (yx == 0)?y:x;

}

function mouse(e){

var msy = (domSy)?window.pageYOffset:0;

if (!e) e = window.event;

if (typeof e.pageY == 'number'){

my = e.pageY - msy;

mx = e.pageX;}

else{

my = e.clientY - msy;

mx = e.clientX;

}

}

function blcnsgg(){

var sy = scrl(0);

var sx = scrl(1);

var chy = Math.floor(fy-50);

if (chy <= 0) chy = 0;

if (chy >= h-50) chy = h-50;

var chx=Math.floor(fx-34);

if (chx <= 0) chx = 0;

if (chx >= w-69) chx = w-69;

var c1y = chy+17;

var c1x = chx+17;

var c2y = chy+17;

var c2x = chx+52;

var dy1 = my - c1y;

var dx1 = mx - c1x;//80

var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);

var dy2 = my - c2y;

var dx2 = mx - c2x;

var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);

var ay1 = my - c1y;

var ax1 = mx - c1x;

var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;

var ay2 = my - c2y;

var ax2 = mx - c2x;

var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;

var dv = 1.7;

var onEyeBall1 = (d1 < 17)?d1/dv:10;

var onEyeBall2 = (d2 < 17)?d2/dv:10;

balcneedimg.top = chy+sy+pix;

balcneedimg.left = chx+sx+pix;

blcnimgmin.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;

blcnimgmin.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;

blcnimgmin2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;

blcnimgmin2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;

}

function balcnimg4(){

dy = fy += (my-fy) * 0.05;

dx = fx += (mx-fx) * 0.05;

blcnsgg();

setTimeout(balcnimg4,30);

}

function blcndde(){

balcneedimg = document.getElementById("blcnvv"+balcnimg3).style;

blcnimgmin = document.getElementById("balcnad"+balcnimg3).style;

blcnimgmin2 = document.getElementById("balcnad2"+balcnimg3).style;

blcnff();

balcnimg4();

}

if (window.addEventListener){

window.addEventListener("resize",blcnff,false);

window.addEventListener("load",blcndde,false);

document.addEventListener("mousemove",mouse,false);

}

else if (window.attachEvent){

window.attachEvent("onresize",blcnff);

window.attachEvent("onload",blcndde);

document.attachEvent("balcnkk",mouse);

}

})();

}

</script>