Cursor | Mauszeiger mit CSS ändern bzw. bestimmen

Gelegentlich kann es sehr sinnvoll wie hilfreich sein, ein Cursor-Symbol selbst festzulegen, der beim Mouseover über einem bestimmten Bereich angezeigt werden soll; dies ist bei jedem Element eines Html-Dokumentes mit ein wenig CSS zu realisieren.
Allerdings interpretieren die Browser in Abhängigkeit des vom Anwender verwendetem Betriebssystem die Cursor-Anzeigen etwas unterschiedlich, insbesondere bei den eigenen bzgl. des Dateiformats!

Cursor-Symbole (System-Cursor) im Überblick

Um die Cursor-Symbole anzusehen bzw. zu testen, fahren Sie bitte mit Ihrer Maus über den jeweiligen Wert!

Hinweis: Setzen Sie die oben aufgeführten Cursor-Anzeigen nur zweckentsprechend ein, um bei Besuchern keine Verwirrung auszulösen! In der Regel erwarten diese, daß z. B. hinter einem 'help'-Cursor auch ein Info-, Hilfetext o.ä. erscheint!

CSS-Regel mit Klassenselektor:

.cursor
{
cursor: help
}

Anweisung im Html-Dokument:

<a href="#" class="cursor">Hilfe</a>

Beispiel testen: HilfeInfo-Box für Hilfetext
Interessieren Sie sich auch für diese Mouseover-Info-Box?
Hier geht es zum Artikel 'Mouseover-Info-Box mit CSS kreieren, formatieren und gestalten'!

Eigene (grafische) Cursor verwenden

Erlaubte Dateiformate für Cursor-Grafiken sind .cur, .ani, .ico, .gif, .jpg, .png und .bmp!

Getestet wurden die Cursor-Dateiformate unter Windows XP (SP 3) in den Browsern:

• Internet Explorer 8
• Opera (Version 10.61)
• Safari (Version 5.0.1)
• Mozilla Firefox (Version 3.6)

Testergebnisse

Der Test ergab, daß der Browser Opera keine eigenen Cursor darstellt, jedoch aber den zwingend zu definierenden Alternativwert (hier in unserem Beispiel 'crosshair'); die übrigen Testergebnisse entnehmen Sie bitte der folgenden Auflistung:

CSS-Anweisung: .cursor { cursor: url('cursor.gif'),crosshair } Grafikeigenschaft: Hintergrund transparent Browser: Mozilla Firefox, Safari

CSS-Anweisung: .cursor { cursor: url('cursor.cur'),crosshair } Grafikeigenschaft: Hintergrund transparent Browser: Internet Explorer, Mozilla Firefox, Safari

CSS-Anweisung: .cursor { cursor: url('cursor.ani'),crosshair } Grafikeigenschaft: animiert, Hintergrund transparent Browser: Internet Explorer

CSS-Anweisung: .cursor { cursor: url('cursor.ico'),crosshair } Grafikeigenschaft: Hintergrund transparent Browser: Internet Explorer, Mozilla Firefox, Safari

CSS-Anweisung: .cursor { cursor: url('cursor.png'),crosshair } Grafikeigenschaft: Hintergrund transparent Browser: Mozilla Firefox, Safari

CSS-Anweisung: .cursor { cursor: url('cursor.jpg'),crosshair } Grafikeigenschaft: Hintergrund nicht transparent (Grafiken im jpg-Format unterstützen keine Transparenzen) Browser: Mozilla Firefox, Safari

CSS-Anweisung: .cursor { cursor: url('cursor.bmp'),crosshair } Grafikeigenschaft: Hintergrund nicht transparent (Grafiken im bmp-Format unterstützen keine Transparenzen) Browser: Mozilla Firefox, Safari

Die meisten der oben aufgeführten Mauszeiger wurden mit dem Freeware-Tool RWCursor-Editor erstellt!
cursor.zip downloaden
RWCursor-Editor downloaden

Hinweis: Nach der Pfadangabe der Cursor-Grafik ist es zwingend erforderlich in der CSS-Anweisung zusätzlich noch einen Alternativwert zu definieren. Selbstverständlich kann auch anstatt 'crosshair' ein anderer Wert wie 'auto', 'default' etc. festgelegt werden!

Häufige Anzeigeprobleme bei eigenen Cursors:

Wird der gewünschte Mauszeiger nicht angezeigt, so könnte das möglicherweise auch an folgenden Faktoren liegen:

a) der verwendete Browser interpretiert das gewählte Dateiformat der
Cursor-Grafik nicht (siehe Testergebnisse unter Browser)

b) fehlender Alternativwert nach dem 'url'-Wert in der CSS-Anweisung,
welcher zwingend und zwar getrennt durch ein Komma hinten anzustellen ist

c) durch die Angabe eines relativen Pfads zur Url der Cursor-Grafik in der CSS-Datei, falls die Grafik in einem übergeordnetem Verzeichnis zum/r Html-Dokument/CSS-Datei liegen sollte, wie nachfolgend aufgeführt ...

CSS-Regel (Url mit relativer Pfadangabe):

.cursor
{
cursor: url('../images/cursor.ico'),crosshair
}

Problembehebung:
zu a) ggf. einen anderen Browser verwenden oder testen
zu b) einen Alternativwert nach Wahl hinter dem 'url'-Wert anführen
zu c) Cursor-Grafik, Html-Dokument und CSS-Datei in das selbe Verzeichnis
legen oder in der CSS-Datei absoluten Pfad zur Cursor-Grafik angeben, wie nachfolgend aufgeführt ...

CSS-Regel (Url mit absoluter Pfadangabe):

.cursor
{
cursor: url('http://www.xyz.de/images/cursor.ico'),crosshair
}

Der gesamten Webseite einen eigenen Mauszeiger zuweisen ...

CSS-Regel mit dem Typselektor 'body':

body
{
cursor: url('cursor.ico'),auto
}

Eine Anweisung im Html-Dokument muß nicht notiert werden!

Das könnte Sie vielleicht auch interessieren:
[ Mouseover-Info-Box mit CSS kreierenCSS-Tipp: Wie Sie eine solche Info-Box mit CSS gestalten können, erfahren Sie über folgenden Artikel! ]
[ Cursor und Favicons selbst herstellen mit Cursor-Editor (auch animierte) ]
[ Favicon.ico in der Browser-Adressleiste anzeigen lassen ]

[ veröffentlicht am 30.08.2010 ] __________________________

  zurück | weiter