JavaScripts -> Mauseffekte -> Augen-Mausverfolger

Diese Augen schauen der Maus hinterher. Sie benötigen die Bilder eyebg.gif und eyefg.gif (auch im Download-Bereich)

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<script type="text/javascript">
<!--
//EYES v1.0 (c) 2003 Triple-M / http://www.htmlarsenal.de

//Benutzung/Usage: Script mit dem Inhalt / script with the content
//eyes(x,y);
//im Body-Bereich, wobei x und y die Position in Pixeln angibt
//in the body area, where x and y specifies the position in pixels

var ppath="/pics/examples/"; //Pfad zu den Bildern / Path to the images

//Ab hier bitte nichts mehr verändern / Please do not change anything from here on

var mousex=0;
var mousey=0;
var xp,yp;

function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.x;
    mousey=window.event.y;
  } else {
    mousex=nsevent.pageX;
    mousey=nsevent.pageY;
  }
  xc=xp+37;
  yc=yp+37;
  dist=Math.sqrt(Math.pow(mousex-xc,2)+Math.pow(mousey-yc,2));
  angle=Math.acos((mousex-xc)/dist);
  if(mousey>yc)angle=0-angle;
  if(dist<24)r=Math.floor(dist);
  else r=23;
  document.getElementById("eyeball1").style.left=(xp+25+Math.floor(r*Math.cos(angle)))+"px";
  document.getElementById("eyeball1").style.top=(yp+25-Math.floor(r*Math.sin(angle)))+"px";
  xc=xp+112;
  dist=Math.sqrt(Math.pow(mousex-xc,2)+Math.pow(mousey-yc,2));
  angle=Math.acos((mousex-xc)/dist);
  if(mousey>yc)angle=0-angle;
  if(dist<24)r=Math.floor(dist);
  else r=23;
  document.getElementById("eyeball2").style.left=(xp+100+Math.floor(r*Math.cos(angle)))+"px";
  document.getElementById("eyeball2").style.top=(yp+25-Math.floor(r*Math.sin(angle)))+"px";

}

function eyes(x,y) {
  document.write('<img style="position:absolute; left:'+x+'px; top:'+y+'px; width:150px; height:75px; border:none" src="'+ppath+'eyebg.gif">');
  document.write('<img id="eyeball1" style="position:absolute; left:'+(x+25)+'px; top:'+(y+25)+'px; width:25px; height:25px; border:none" src="'+ppath+'eyefg.gif">');
  document.write('<img id="eyeball2" style="position:absolute; left:'+(x+100)+'px; top:'+(y+25)+'px; width:25px; height:25px; border:none" src="'+ppath+'eyefg.gif">');
  xp=x;
  yp=y;
}

document.onmousemove=capturemaus;
eyes(100,100);
//-->
</script>