Kreisende Cursor Schafe

Da mich jeder nach den Schafen fragt, welche auf der Main-Page um den Mauszeiger kreisen,
hier eine kleine Doku dazu.

Also erstens sind die Schafe weder Java, noch ein Plugin wie Flash, sondern einfaches Javascript.

Und zweitens habe nicht ich das Script geschrieben, ich habe es nur an meine Bedürfnisse (Schafe) angepasst.
Also wenn ihr es auf Eurer Homepage benutzen möchtet, lasst bitte die Email Adressen aller beteiligten Programmierer drin.

Hier nun das eigentliche Script:

Der erste Teil kommt gleich unter das <title> Tag:
<style type="text/css">
<!--
.myclass { position:absolute; }
//-->
</style>
<script LANGUAGE="JavaScript1.2">

<!--
// SHEEP MOVER v2.5 dwyss@gmx.net
//
// Anpassung an NS 4: Frank@Antwerpes.de
// Anpassung an IE: Tom@Stich.com
var nn = (document.layers);
var ie = (document.all);

// Logo animation
var yBase = 50;
var xBase = 50;
var delay = 15;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 50;
var Ypos = 50;
var j = 0;

function MoveHandlerNN(e) {
Xpos = e.pageX ;
Ypos = e.pageY ;
}

function MoveHandlerIE() {
Xpos = event.clientX ;
Ypos = event.clientY ;
}

function animateNN() {
yBase = window.innerHeight/4 ;
xBase = window.innerWidth/4;
for ( j = 0 ; j < 6 ; j++ ) {
document["s"+j].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)* Math.cos((currStep + j*25)/10);
document["s"+j].left = Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)* Math.cos((currStep + j*25)/10);
}
currStep += step;
setTimeout("animateNN()", delay) ;
}

function animateIE() {
yBase = document.body.clientHeight/4;
xBase = document.body.clientWidth/4;
for ( j = 0 ; j < 6 ; j++ ) {
document.all["s"+j].style.top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)* Math.cos((currStep + j*25)/10);
document.all["s"+j].style.left = Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)* Math.cos((currStep + j*25)/10);
}
currStep += step;
setTimeout("animateIE()", delay) ;
}

function animate() {
if (nn) animateNN();
if (ie) animateIE();
}

if(nn) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = MoveHandlerNN;
}
if (ie)
document.onmousemove = MoveHandlerIE;

//-->
</script>


Ins <body>-Tag muss das onLoad() rein:
<body onLoad="animate()">

Dann brauchts noch die folgenden paar Zeilen irgendwo zwischen <body> und </body>
<div id="s0" class="myclass">
<dd><img SRC="images/picture1.gif" WIDTH="35" HEIGHT="23"> </dd>
</div><div id="s1" class="myclass">
<dd><img SRC="images/picture2.gif" WIDTH="35" HEIGHT="23"> </dd>
</div><div id="s2" class="myclass">
<dd><img SRC="images/picture3.gif" WIDTH="35" HEIGHT="23"> </dd>
</div><div id="s3" class="myclass">
<dd><img SRC="images/picture4.gif" WIDTH="35" HEIGHT="23"> </dd>
</div><div id="s4" class="myclass">
<dd><img SRC="images/picture5.gif" WIDTH="35" HEIGHT="23"> </dd>
</div><div id="s5" class="myclass">
<dd><img SRC="images/picture6.gif" WIDTH="35" HEIGHT="23"> </dd>
</div>

images/picturex.gif muss natürlich durch den Namen und Pfad Deines Bildes ersetzt werden.

und das war's auch schon, viel Spass!