Autor: Friedel

IE 5

IE 6

NN 4

NN 6

NN 7

Mozilla 1

Opera 5

Opera 6

Opera 7

Ebay

Kurzbeschreibung	Eine Folge von Bildern folgt dem Mauszeiger.
Vorteile
Nachteile	Funktioniert nur, wenn der Browser Javascript ausführen kann.
Schwierigkeit	Wer schon erfolgreich HTML-Seiten geschrieben hat sollte auch diesen Mausverfolger hinkriegen.
Besonderheiten	Das Verhalten das Mausverfolgers kann von dir verändert werden.

Mausverfolger mit Bildern

Um diesen Mausverfolger zu verwenden brauchst du die Seite in die er eingebaut werden soll, die Bilder die die Maus verfolgen sollen und die Scriptdatei. In diesem Beispiel wird der Mauszeiger von 6 Bildern verfolgt.

Bild 1

Bild 2

Bild 3

Bild 4

Bild 5

Bild 6

Du kannst jedes browsertaugliche Bild verwenden. Browsertaugliche Bilder haben entweder das .gif-Format, das .jpg-Format oder das .png-Format. Da Bilder aber immer rechteckig sind, empfehle ich nur Bilder im .gif-Format zu verwenden. Nur in diesem Format kann man den Bildhintergrund transparent machen. Die Bilder dürfen animiert sein, wie du siehst. Es ist egal welche und wie viele Bilder du verendest. Aber die Bilder sollten natürlich nicht zu groß sein. Zunächst solltest du all diese Bilder in einen Ordner speichern (nicht unbedingt notwendig, erleichtert die Sache aber).

Folgendes musst du in den Quellcode deiner Seite einsetzen:

Die Stellen, die ich grün hinterlegt habe, müssen von dir angepasst werden. Wo bei mir steht Bilder/01.gif, musst du die Adresse und den Dateinamen des Bildes eintragen das dem Mauszeiger als erstes folgen soll. Bei Bilder/02.gif kommt das 2. Bild usw. Dahinter werden bei width= und height= jeweils die Breite und die Höhe des Bildes eingetragen. Das ist natürlich die Breite und Höhe mit der die Bilder dargestellt werden. Diese Werte müssen nicht unbedingt identisch sein mit den tatsächlichen Dimensionen der Bilder. Dieser Quellcode enthält für jedes Bild das dem Mauszeiger folgen soll ein mal <div id="mvbn" style="position: absolute"><img src="Bildadresse/Bildname" width="Bildbreite" height="Bildhöhe"></div>. Dabei ist n eine fortlaufende Nummer. Wenn du dem Mauszeiger also mehr oder weniger als 6 Bilder folgen lassen willst musst du diesen Text entsprechend mehr oder weniger oft wiederholen. Natürlich kannst du auch ein Bild mehrmals verwenden. Das verkürzt die Ladezeit der Seite.

Jetzt fehlt noch das eigentliche Script das die Bilder bewegen soll. Dieses Script ist in einer eigenen Scriptdatei enthalten. Diese Scriptdatei kannst du dir hier downloaden: mouse.js. Du solltest sie auch in den Ordner mit den Bildern abspeichern. Wundere dich nicht, wenn der Download sehr schnell abgeschlossen ist. Die Datei hat nur etwas mehr als 2 KB. Um dieses Script in deiner Seite verwenden zu können, ergänzt du folgendes in den Headbereich deiner Seite:

Natürlich musst du Bilder/ durch die Adresse ersetzen wo du die Datei mouse.js gespeichert hast.

Nachdem jetzt die Bilder und das Script verfügbar sind, muss das Script nur noch gestartet werden. Dazu ergänzt da das <body>Tag deiner Seite um onLoad="init()". Im einfachsten Fall lautete das <body>Tag bisher einfach <body>. Dann muss es jetzt <body onLoad="init()"> lauten. Wenn dein <body>Tag vorher schon zusätzliche Parameter enthalten hat, ist es jetzt eben einer mehr. Z.B. aus <body bgcolor="#FFCC66" text="#000080" link="#0000FF" vlink="#666666" alink="#FF0000"> wird dann <body bgcolor="#FFCC66" text="#000080" link="#0000FF" vlink="#666666" alink="#FF0000" onLoad="init()">. Nur wenn die Zeichenfolge onLoad="xxx" schon mal enthalten war, wobei xxx ein beliebiger Text sein kann, funktioniert es nicht so. In diesem Fall wird onLoad="xxx" zu onLoad="xxx; init()".

Jetzt ist deine Seite funktionsbereit. Jetzt musst du noch bestimmen wie sich der Mausverfolger verhalten soll. Das machst du einfach indem du 2 Werte in der Scriptdatei veränderst. Die Auswirkung des ersten kannst du hier gleich testen.

Je nach dem welchen Wert du für "Faktor" einstellst, ändert sich das Verhalten des Mausverfolgers. Bei 0 bleiben die Bilder ganz stehen. Bei 30 bewegen sich alle Bilder fast synchron mit der Maus. Dazwischen kannst du in 31 Stufen variieren.

Auf deiner Seite ist natürlich kein solches Feld um den Wert für "Faktor" zu bestimmen. Um "Faktor" auf deiner Seite an zu passen musst du die Datei mouse.js mit einem Texteditor wie z.B. Notepad öffnen. Dort suchst du nach der Zeile var Faktor = 6; und passt den Wert entsprechend an. Achtung! Hier darfst du nur ganze Zahlen von 0 bis 30 eintragen! Danach musst du die geänderte Datei wieder als Textdatei ohne Formatierungen abspeichern. Wenn sich dabei die Dateiendung zu .txt ändert, musst du die Datei anschließend wieder in mouse.js umbenennen.

Die zweite Möglichkeit das Verhalten zu ändern kannst du leider nicht im Voraus auf meiner Seite testen. Bei dieser Möglichkeit kannst du in der Datei mouse.js in der Zeile var Tempo = 12; den Wert verändern. Erlaubt sind alle positiven ganzen Zahlen. In diesem Script wird ständig gemessen wo sich die Maus gerade befindet und wo die einzelnen Bilder sind. Der Betrag von "Faktor" hat bestimmt, wie groß die Bewegungsschritte sind die die einzelnen Bilder machen. Mit "Tempo" bestimmst du wie oft solche Schritte gemacht werden. Der Wert gibt den Abstand zwischen den einzelnen Mess- und Positioniervorgängen in Millisekunden an. Je größer dieser Wert ist, desto ruckelnder wird die Bewegung. Aber je kleiner er wird, desto höher ist die Belastung für den PC und den Browser. Wenn der PC mit dem Berechnen nicht mehr mit kommt, ruckelt der Mausverfolger noch mehr. Eine gute Performance erreichst du meist im Bereich zwischen 5 und 100. Das hängt natürlich auch davon ab was der Browser noch alles gleichzeitig berechnen soll, bzw. was für Scripte noch in deine Seite eingebaut sind. Hier machen sich auch animierte GIFs deutlich bemerkbar weil sie für die Animation viel Rechenleistung verbrauchen.

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: