Alternative Cursorsymbole

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Wird die Maus über einen Link bewegt, soll statt des üblichen Cursorsymbols eine Uhr angezeigt werden, wie in folgender Abbildung gezeigt.

Abbildung: Als Cursorsymbol wird eine Uhr angezeigt.

Lösung

Verwenden Sie die Eigenschaft cursor, um den Cursor anzupassen:

Diskussion

Der Eigenschaft cursor können mehrere verschiedene Werte zugewiesen werden, die Sie in der nächsten Tabelle finden. Die Unterstützung für diese Werte ist jedoch stark vom verwendeten Browser abhängig. Opera 7 und Internet Explorer für Windows 5.5+ unterstützen die Eigenschaft cursor, während Netscape Navigator 6+ die meisten Werte außer uri versteht. Außerdem werden in Netscape die Werte für cursor nicht an Kindelemente vererbt.

Tabelle: Werte für die Eigenschaft cursor.

Wert	Beschreibung	Beispiel
auto	Die Darstellung des Cursors wird vom Browser festgelegt.
crosshair	Zwei Linien, die sich in der Mitte kreuzen; ein Fadenkreuz, ähnlich einem großen Pluszeichen.
default	Plattformabhängiger Cursor, der in den meisten Browsern als Pfeil dargestellt wird; kann je nach Benutzerprogramm und Betriebssystem variieren.
pointer	Wird verwendet, um zu illustrieren, dass sich der Mauszeiger über einem Link befindet. Wird manchmal als Hand mit ausgestrecktem Zeigefinger dargestellt; kann aber je nach Betriebssystem und Benutzerprogramm etwas anderes sein.
move	Zeigt an, dass ein Element bewegt werden kann. Gelegentlich dargestellt als Fadenkreuz mit Pfeilspitzen an den Enden oder als gespreizte Hand.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize	Ein Pfeil, der anzeigt, in welche Richtung eine Seite bewegt werden kann. se-resize steht zum Beispiel für eine südöstliche Bewegungsrichtung, d.h. nach rechts unten.
text	Zeigt an, dass Text ausgewählt werden kann. Entspricht dem Cursor, der oft in Textverarbeitungsprogrammen verwendet wird; ähnelt einem großgeschriebenen I.
wait	Zeigt an, dass der Computer gerade beschäftigt ist. Gelegentlich als Stundenglas dargestellt.
progress	Zeigt an, dass der Computer gerade beschäftigt ist, der Benutzer aber weiterhin mit dem Browser interagieren kann.
help	Zeigt an, dass Informationen oder Hilfe zur Verfügung stehen, oftmals auf der Zielseite. Gelegentlich als Fragezeichen oder Pfeil mit einem Fragezeichen dargestellt.
<uri>	Der Standardcursor kann durch einen extern definierten Cursor ausgetauscht werden. Das kann zum Beispiel ein Bild, eine Windows-Cursordatei, ein SVG-Cursor oder etwas anderes sein.	N/A

Der Code zum Einbinden eines eigenen Cursors ähnelt dem Code für das Festlegen eines Hintergrundbildes für ein Element:

Wenn Sie die Standardcursor ändern, sollten Sie bedenken, dass die meisten Benutzer ein solches Vorgehen irgendwo zwischen einer kleinen Störung und einem extremen Ärgernis einordnen, je nachdem, wie groß Ihre Änderungen sind. Wenn Sie den Cursor, den ein Benutzer zu sehen gewohnt ist, ändern, so geschieht das auf eigenes Risiko.

Siehe auch

Die CSS 2.1-Spezifikation zur Eigenschaft cursor.