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:
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>
<!--
//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>