Verfolgte Maus
Das Script wird gleich nach dem <BODY>-Tag eingefügt. Da es in unsichtbaren Kommentarklammern steht, wird es nicht angezeigt. Wir müssen nun nur noch bei 'var path' unsere Grafik nennen und evtl. bei 'var trailLenghth' die Anzahl der verfolgenden Grafiken nennen.
Achtung: Eine verfolgende Grafik sollte möglichst klein sein, da sie sonst ziemlich lange braucht, um die Maus zu verfolgen. Ausserdem sollte der Hintergund der Grafik transparent sein.
Hinweis: Dieses Script funktioniert nur im IE!
Das wollen wir erreichen:
Die Maus soll von folgender Grafik ('sterne.gif') verfolgt werden:
Tag:
<script language="JavaScript1.2">
<!--
var trailLength = 10
var path = "sterne.gif"
var isIE = false,isNav = false,range = "all.",style = ".style",i,d = 0
var topPix = ".pixelTop",leftPix = ".pixelLeft",images,storage
if (document.layers) {
isNav = true,range = "layers.",style = "",topPix = ".top",leftPix = ".left"
} else if (document.all) {
isIE = true
}
function initTrail() {
images = new Array()
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image()
images[i].src = path
}
storage = new Array()
for (i = 0; i < images.length*3; i++) {
storage[i] = 0
}
for (i = 0; i < images.length; i++) {
(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>')
}
trail()
}
function trail() {
for (i = 0; i < images.length; i++) {
eval("document." + range + "obj" + i + style + topPix + "=" + storage[d])
eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1])
d = d+2
}
for (i = storage.length; i >= 2; i--) {
storage[i] = storage[i-2]
}
d = 0
var timer = setTimeout("trail()",10)
}
function processEvent(e) {
if (isIE) {
storage[0] = window.event.y+document.body.scrollTop+10
storage[1] = window.event.x+document.body.scrollLeft+10
} else {
storage[0] = e.pageY+12
storage[1] = e.pageX+12
}
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE)
}
if (isIE || isNav) {
initTrail()
document.onmousemove = processEvent
}
//-->
</script>
So sieht es aus:
Guck mal die Maus an! ;-)