Geschrieben von stefplanet am 06.11.2004, 02:43

Manch einem mag das vielleicht langweilig erscheinen: immer der Standardmauszeiger, über Links die Hand, dann vielleicht nochmal dieses Strichchen bei Eingabefeldern, das war's. Wer hier für ein bisschen Abwechslung sorgen will, dem könnte dieses Tutorial helfen.

-> Um einer bestimmen Klasse einen speziellen Cursor zuzuweisen, schreibt man z.B. folgendes ...

body { cursor: hand; }
a {cursor: crosshair; }
.faq { cursor: help; }

In diesem Falle ist der Standardcursor auf der Website eine Hand, fährt der Besucher auf Links, ändert er sich in ein Fadenkreuz, und auf Texten der Klasse 'faq' (also z.B. FAQs ;-) ) sieht man den Cursor mit einem Fragezeichen.
Diese Bezeichnungen beziehen sich auf die Standardcursor, die jedem zur Verfügung stehen sollten. Eine Übersicht über diese:

default = Standardcursor
pointer = Hand mit ausgestrecktem Finger (Links)
hand = Hand
help = Hilfesymbol (Cursor mit Fragezeichen)
text = Senkrechter Strich (in Textfeldern)
wait = Sanduhr / Cursor, wenn Warten angesagt ist
crosshair = Fadenkreuz

Diese könnt ihr ohne Bedenken auf eurer Homepage verwenden, denn diese sollten jedem Surfer zugänglich sein. Allerdings gibt es noch eine weitere Möglichkeit ...

-> Eigenes Bild als Cursor: Ihr könnt auch ein eigenes kleines Bild als Cursor festlegen. Dieses müsst ihr als .cur-Datei speichern (Einfach ein .gif-Bild erstellen und umbenennen ;-) ) und natürlich hochladen. Dann bezeichnet man das ganze in den CSS-Definitionen folgendermaßen:

body { cursor: url("cursor.cur"), default; }

Nach dem eigenen Cursor sollte man noch einen Standardcursor angeben, sollte das Laden fehlschlagen.

Ein Beispiel findet ihr z.B. unter http://stefplanet.xardas.lima-city.de/tutorials/mauszeiger.htm

Denn, hoffe das Tutorial hilft euch, bei Fragen am besten per Mail (mail [at] tomarus [punkt] de) oder per pm :)

Bewertung Anzahl
6
76,9 %
10 Bewertungen
5
23,1 %
3 Bewertungen