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.
|