Cursor 🖱️ ein ausgefallener Mauszeiger für Ihre Homepage

Mit einem eigenen Cursor können Sie Ihre Homepage aufpeppen und von anderen Webseiten unterscheiden. Sehr schön sind Cursor, die zum Inhalt der Homepage passen (z.B. eine Blume als Cursor bei einer Pflanzenseite). Sie sollten allerdings beim Einsatz eines individuellen Cursors bedenken, dass die Barrierefreiheit und klare, logische Benutzbarkeit für den User eher abnimmt.

Wir haben auf dieser Webseite Garfield als individuellen Cursor in der nachfolgenden Box als Beispiel eingefügt:

Fahren Sie mit Ihrer Maus über diesen Text bzw. über den blauen Hintergrund und Ihr Mauszeiger verwandelt sich in Garfield! Funktioniert nur auf PC & Notebook… auf dem Smartphone & Tablet gibt es ja keinen Mauszeiger und somit auch keine individuellen Mauszeiger 😉

Den Cursor haben wir von cursors-4u.com – zum Zeitpunkt unseres Besuches gab es bei Cursors-4u.com über 11.000 verschiedene Mauszeiger. Die Mauszeiger von Cursors-4u.com sind komplett fertig für dein Einbau, d.h. es gibt fertige Quellcodes zum einfachen Einbinden des jeweiligen Cursors.

Aber wie immer für den geneigten Webmaster hier der notwendige Code für den Einbau eines individuellen Cursors.

Datei des Cursors auf dem eigenen Webspace im Hauptverzeichnis speichern (in unserem Fall heißt die Datei garfield.cur – es sind aber auch normale Grafikdateien wie .gif möglich). Nun muss im Stylesheet noch die Angabe für den Cursor ergänzt werden:

body, a:hover {cursor: url(garfield.cur), progress;}

Dabei muss zuerst der Bereich definiert werden, in dem der besondere Cursor angezeigt wird (hier body + a:hover = der Cursor wird auf der gesamten Seite und auch beim Überfahren von Links angezeigt. cursor: url(garfield.cur) definiert den individuellen Cursor. progress steht für die alternative Darstellung, falls der individuelle Cursor nicht dargestellt werden kann (ist sehr wichtig, in unserem Beispiel würde die Windows-Warte-Eieruhr angezeigt werden).

Weitere Informationen und jede Menge Cursorvorlagen finden Sie auf folgenden Webseiten:

anicursor.com – jede Menge Cursor & außerdem noch Javascripts für die Mausverfolger, das sind Grafiken, die um den Mauszeiger schwirren oder dem Mauszeiger folgen.
cursor.cc – hier finden Sie einen Cursor-Generator, mit dem Sie sich einen individuellen Mauszeiger für Ihre Homepage selbst zusammenbauen können!
cursors-4u.com – über 11.000 individuelle Mauszeiger fix- und fertig zum Einbau
joescursors.tripod.com – Joe´s Cursor-Webseite
totallyfreecursors.com – der Name ist Programm – viele kostenlose Mauszeiger

Eine Anleitung, wie Sie einen Sound-Effekt bei Mouse-Over mit Javascript realisieren, finden Sie hier: