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
  • rw-designer.com/cursor-library – die Open Cursor Libary – nach Anbieterangabe ├╝ber 28.000 Mauszeiger
  • 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:


Fehler melden Sie haben einen Fehler auf meine-erste-homepage.com gefunden? Informieren Sie uns, damit wir den Fehler beheben k├Ânnen!

Neue Seite melden Sie haben ein neues Webmastertool f├╝r uns? Hier k├Ânnen Sie die f├╝r Webmaster n├╝tzliche Webseite bei uns anmelden!
Erstellt mit ❤ Liebe und WordPress