Ojos que siguen al cursor

<script type='text/javascript'>
//<![CDATA[
// Ojos que siguen al cursor
// Script original de Oopstudios.com
// Adaptado por ciudadblogger.com

EYES = {};
EYES.stack = [];
//
EYES.follow = function (eye) {
var el1 = document.getElementById (eye);
var el2 = el1.getElementsByTagName ("IMG");
el2 = el2[0];
el2.centre = (el1.offsetWidth - el2.offsetWidth) / 2;
el2.style.margin = el2.centre + "px 0 0 " + el2.centre + "px";
el1.maxDist = 6 * el1.offsetWidth;
EYES.stack.push ([el1, el2]);
};
EYES.mousemove = function (e) {
if (!EYES.stack.length) {
return;
}
//
var mouseX = mouseY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY) {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
//

for (var e=0, l=EYES.stack.length; e<l; e++) {
var el = EYES.stack[e];
var elX = elY = 0;
if (el[0].offsetParent) {
obj = el[0];
do {
elX += obj.offsetLeft;
elY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
el[0].centreX = elX + Math.round (el[0].offsetWidth / 2);
el[0].centreY = elY + Math.round (el[0].offsetHeight / 2);
var difX = mouseX - el[0].centreX;
var difY = mouseY - el[0].centreY;
var dTan = Math.atan2 (difX, difY);
var dist = Math.sqrt ((difX * difX) + (difY * difY));
dist = Math.sin ((dist > el[0].maxDist ? 1 : dist / el[0].maxDist));
var newX = el[1].centre + Math.round (Math.sin (dTan) * el[1].centre * dist);
var newY = el[1].centre + Math.round (Math.cos (dTan) * el[1].centre * dist);
el[1].style.margin = newY + "px 0 0 " + newX + "px";
}
};

if (window.attachEvent) document.attachEvent ("onmousemove", EYES.mousemove);
else document.addEventListener ("mousemove", EYES.mousemove, false);
//]]>
</script>


<div style="position:relative; height:150px; margin-bottom:30px;">
<div id="Ojo1" style="width: 170px; height: 140px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmqT79cL59Ifzr6xWzvCNv0XeZnluxKWa9OHXXzaanudaCp5NGR70Vy7XFrjen57b3IkGllJ5w8ibtlB1wk3YYaqJ2k3MghqozMDK9yQN1TTrU4xcIKTD47K2D-EvCZKvs0bvwkGt3gU/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVyKNtzmYORKzrwvjfi56wa1zdHmfQ2ogOxuUOQIGhMmkidkp2SGUBlOOT8RSjbAtqq2EftzDalJ-ne-1Kjky_gTDoAr6uTiSlgNUVH8XvoNgoIIMxjym-zwM97JC41SgL7P3mRpaA0s/s30/pupila.png" width="23" height="23" /></div>
<div id="Ojo2" style="width: 170px; height: 140px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnvLGdKwYgV9LYaqVkk11DybT03_n6MpISp4RcmSSERsED7XyQ2jrTgPr8pYUwhtQ0tE2WmgWJBnGfyeTz-Lf8EAlv375RRhaItxz8Afpl-Rc84T1EnUZzrxJoezWeb9zZWjKiZstxW4/s170/ojo_2.png) center center no-repeat; position:absolute;
left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVyKNtzmYORKzrwvjfi56wa1zdHmfQ2ogOxuUOQIGhMmkidkp2SGUBlOOT8RSjbAtqq2EftzDalJ-ne-1Kjky_gTDoAr6uTiSlgNUVH8XvoNgoIIMxjym-zwM97JC41SgL7P3mRpaA0s/s30/pupila.png" width="23" height="23" /></div>
</div>


<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script>

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_Pf6SzRL1w9z-akBP0NVcp8E40v-fHISwCrXClwmlbQxbZUvnljhX4IASQaBK_FQOoCxAf0dRkwO_TEfFHHLmNkaNRD1e2IrzG8HfA1ROYAiwJYSeVEDJk1CBv7opzlGgkNcDz6CS_k/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfX6xjO1KRIvSKViUhH2z70n1jQL3-ccoIhOuDPCCfhbfugPKAqJrVA8m8EsFuLEYMDFiHelLuF81ksVnyM4y9Rp5gAfHIh-ylNOr0PLpLxDdVL1khcnZiWj_2m9zx9mjgnpix2p8jPw/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdUfyNZNG-0K_QWSkeYiFyzrnlRmysXtfuOfRAVESfgUR0Leq385uqcq-0V8qFpUjOUgoqgXYvIkVqM3aH-GfOUk-rlygV7p7wVEk58QF4ykRmMMunV-chslDNFUrEzhwc0W8zk77VZ8/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfX6xjO1KRIvSKViUhH2z70n1jQL3-ccoIhOuDPCCfhbfugPKAqJrVA8m8EsFuLEYMDFiHelLuF81ksVnyM4y9Rp5gAfHIh-ylNOr0PLpLxDdVL1khcnZiWj_2m9zx9mjgnpix2p8jPw/s34/pupila.png" width="30" height="30" /></div>
</div>

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTI6Zdtoo3L01bncGBfsb3rR6MNLZ9K4I4SJx96tKk0z3odwQ-hIHPDBBUe3pLlOCntQU-AFHrCXga2B3gTAxmJo2Vn18O6FOLUkGZC5gj6xc-_pitxL6LW0WosSY1LZEbSeXgJrns3I/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pNlugKSdgZUKz-7ycpJT_W2CW4gjaQ21TMPK5GaPlL4WWjNhqduyi4zne4Cdq8un9qearSqhggW7OVGmd6Pv5m5AzXJC1GteE8Gh15M1Z2N7P2wJhPFa1lPzjJ34akfYCma0pzUCmqA/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCFeu990RqCa8TdpKpErQkGv7kKXpwkd-AHdZxfHfeBzmaq01GSNSDNgMsQsBtwWnAeFv7vKRqurULa48by_x8MN1GOZD2UVdTboNhKqEPxD0eHufk7xL1Pp3cKiHGq2sQIb1EoJDg0qU/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pNlugKSdgZUKz-7ycpJT_W2CW4gjaQ21TMPK5GaPlL4WWjNhqduyi4zne4Cdq8un9qearSqhggW7OVGmd6Pv5m5AzXJC1GteE8Gh15M1Z2N7P2wJhPFa1lPzjJ34akfYCma0pzUCmqA/s34/pupila.png" width="30" height="30" /></div>
</div>

<div style="position:relative; height:161px; margin-bottom:30px;">
<div id="Ojo1" style="width: 180px; height: 161px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZBQ51xwpempTkxnj2bnEG-gxcIuIvypfkz75jr6DDQr-bUWeMmh3aZpmwozJDuV2bRA1XlwBh12xNG0aJcPgWZ33knEiJxDLIKxIZtIkWrcDqLBbktUeu5QHW_hNCA6c3pIuU8APQXM/s180/ojo1.png) center center no-repeat; position:absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvkRz-wTJI9Hpy17p8MwSjE5VWEmQ8cAE2P0u0hJasSnJs7VvTJ_ZTgTYVUwdJd2Hxhyphenhypheng115_Hx8uY-EvhUNiqANQR7ZDilNQgrD08w07NGzp7YSFwVm24sbbLomWuXTH_Sa6a7WQ9KfA/s71/pupila.png" width="65" height="65" /></div>
<div id="Ojo2" style="width: 180px; height: 161px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw13_UOpNC0qdS_4aDn-W5NaebdCd5nNNy94ghkceRYXdb8oTiTVnQS4YtRSSuhVaXWDj3XUJbzRg861qr9HkRqUtrCMAhO0AZjopTyTSJ2TPEbPMyqLCxYAOMiNf6sE9AbcxhNa3TQ-o/s180/ojo2.png) center center no-repeat; position:absolute; left: 545px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvkRz-wTJI9Hpy17p8MwSjE5VWEmQ8cAE2P0u0hJasSnJs7VvTJ_ZTgTYVUwdJd2Hxhyphenhypheng115_Hx8uY-EvhUNiqANQR7ZDilNQgrD08w07NGzp7YSFwVm24sbbLomWuXTH_Sa6a7WQ9KfA/s71/pupila.png" width="65" height="65" /></div>
</div>

Si quisieras mover los ojos más a la izquierda o derecha entonces debes modificar las partes en color rojo, el primer valor es la distancia del primer ojo desde la izquierda, y el segundo valor es la distancia del segundo ojo también desde la izquierda. Por lo tanto, para separar o juntar más los ojos sólo debes modificar el segundo valor de left.

Ojalá que se diviertan tanto como seguro sus lectores lo harán :)