<style type="text/css">
.eye{
display:inline;
overflow:hidden;
position:relative;
float:left;
margin:50px 0 0 50px;
width:50px;
height:50px;
font-size:50px;
line-height:106%;
+line-height:normal;
cursor:default;
}
.pupil{
overflow:hidden;
position:absolute;
margin:-5px 0 0 -5px;
line-height:normal;
font-size:10px;
top:50%;
left:50%;
}
</style>
<div id="leftEye" class="eye">○<span id="leftPupil" class="pupil">●</span></div>
<div id="rightEye" class="eye">○<span id="rightPupil" class="pupil">●</span></div>
<input name="" id="xy" type="text" />
<script type="text/javascript">
var $=function(o){return document.getElementById(o)}
var leftEye=$("leftEye");
var rightEye=$("rightEye");
var leftPupil=$("leftPupil");
var rightPupil=$("rightPupil");
var xy=$("xy");
document.documentElement.οnmοusemοve=function(e){
var e=window.event||e;
var eX=e.clientX, eY=e.clientY;
track(leftEye,leftPupil,eX,eY);
track(rightEye,rightPupil,eX,eY);
}
function track(o,i,eX,eY){
var oL=o.offsetLeft;
var oT=o.offsetTop;
var oW=o.offsetWidth;
var oH=o.offsetHeight;
var oCW=o.clientWidth;
var oCH=o.clientHeight;
var oX=oL+oW/2;
var oY=oT+oH/2;
var eX=eX-oX;
var eY=eY-oY;
var eXY,iL,iT;
if(eX!=0&&eY!=0){
eXY=eX/eY;
var r=oCW/2-12;
var R=Math.sqrt(eX*eX+eY*eY);
var rR=R/5>r?r:R/5;
var iL=Math.sqrt(rR*rR/(1+1/(eXY*eXY)));
if(eX<0)iL=-iL;
var iT=iL/eXY;
i.style.left=(iL+oCW/2)+"px";
i.style.top=(iT+oCH/2)+"px";
}
xy.value=eX+","+eY;
}
</script>