Bewertung speichern...
Wie bindet man einen Cursor in eine Website ein?
Um einen Cursor in deine Website einzubinden, gibt es verschiedenen Möglichkeiten. Ich bevorzuge die Einbindung über eine CSS-Datei. Warum? Weil man mit der CSS-Einbindung viel mehr Möglichkeiten hat.
So kann man mit ihr verschiedene Bereiche einer Website mit unterschiedlichen Cursorn ausstatten.
Mit folgendem Code wird ein benutzerdefinierter Cursor für den gesamten <body>-Bereich bestimmt. Der angegebene Cursor wird also auf der ganzen Website eingeblendet, auch wenn der Mauszeiger über Grafiken liegt:
body {
cursor: url('cursor.cur');
}
Links sind von dieser Definition nicht eigeschlossen und müssen extra definiert werden. Dies geschieht mit folgendem Code:
a:link {
cursor: url('cursor.cur');
}
WICHTIG: Mozilla Firefox unterstützt zurzeit weder .cur noch .ani (animierter Cursor) Dateien. Trotzdem ist es möglich, auch im Firefox eigene Cursor anzeigen zu lassen. Der Trick ist ganze einfach: Für den Firefox die Cursor-Grafik einfach noch als .gif oder .png-Datei abspeichern! Einbinden kann man das dann so:
body {
cursor: url(Cursor.png), url(Cursor.gif), url(Cursor.cur), auto;
}
Wer einen Cursor ohne externe CSS-Datei einbinden möchte, kann dies durch Modifizierung des <BODY>-Tags erreichen:
<BODY style="CURSOR: url('Cursor.cur')">
DESIGN-TIPP: Zu viele verschiedene, in grellen Farben blinkende Cursor verschrecken mehr Besucher als sie anlocken! Eine schöne Cursor-Auswahl findest du direkt hier auf ML-Worlds!