Mittwoch, 17. Oktober 2018

20:14

Homepage-Tipps & -tricks für Webmaster mit CSS

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 zu testen, bitte mit der Maus über den jeweiligen Wert fahren!

# Wert Beschreibung Eigenschaft
1 default Standard-Cursor plattformunabhängig
2 auto Cursor wird automatisch vom System eingestellt
3 text Textcursor Text kann eingefügt oder selektiert werden
4 wait Sanduhr signalisiert einen Wartezustand, bei welchem keine weiteren Interaktionen erlaubt sind
5 help Standardzeiger mit Fragezeichen signalisiert Hilfe zu dem Element
6 crosshair Fadenkreuz Auswahlkreuz für einen Bildbereich (Bildbearbeitung)
7 pointer Hand Zeiger, der über einem Link aktiv wird
8 move gekreuzte Pfeile zeigt bewegliches, verschiebbares Objekt an
9 n-resize Pfeil nach oben
(n = Norden)
zeigt ein in diese Richtung skalierbares Objekt an
10 ne-resize Pfeil nach rechts
(ne = Nordost)
"
11 e-resize Pfeil nach rechts
(e = Osten)
"
12 se-resize Pfeil nach rechts unten
(se = Südost)
"
13 s-resize Pfeil nach unten
(s = Süden)
"
14 sw-resize Pfeil nach links unten
(sw = Südwest)
"
15 w-resize Pfeil nach links
(w = Westen)
"
16 nw-resize Pfeil nach links oben
(nw = Nordwest)
"
17 not-allowed Verbotsschild Aktion nicht erlaubt
18 no-drop Hand mit Verbotsschild Ablage verboten / kein Ziehen möglich
19 all-scroll Scrollcursor in alle Richtungen kann gescrollt werden
20 progress Pfeil mit Sanduhr zeigt ein im Hintergrund noch ladendes Programm an, bei welchem weitere Interaktionen erlaubt sind
21 vertical-text vertikaler Textcursor vertikaler Text kann selektiert werden
22 row-resize Pfeil mit Trennbalken zeigt eine vertikal ziehbare Zeile an
23 col-resize Pfeil mit Trennbalken zeigt eine horizontal ziehbare Spalte an

Hinweis: Die oben aufgeführten Cursor-Anzeigen sollten jedoch nur zweckentsprechend eingesetzt werden, um bei Besuchern keine Verwirrung auszulösen! In der Regel erwarten diese, dass 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

Interesse an der 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 8.1 in folgenden Browser:

  • Internet Explorer 11
  • Opera (Version 41.0)
  • Safari (Version 5.1.7)
  • Mozilla Firefox (Version 50.1.0)
  • Google Chrome (Version 55.0)

Testergebnisse

Der Test ergab, dass der Internet Explorer der einzigste Browser ist, der .ani-cursor darstellen kann. Von daher ist es anzuraten einen Alternativwert zu notieren so wie hier in unserem Beispiel mit 'crosshair'; die übrigen Testergebnisse sind der folgenden Auflistung zu entnehmen:

CSS-Anweisung: .cursor { cursor: url('cursor.gif'),crosshair; }
Grafikeigenschaft: Hintergrund transparent
Browser: Mozilla Firefox, Opera, Safari, Google Chrome
CSS-Anweisung: .cursor { cursor: url('cursor.cur'),crosshair; }
Grafikeigenschaft: Hintergrund transparent
Browser: Internet Explorer, Mozilla Firefox, Opera, Safari, Google Chrome
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, Opera, Safari, Google Chrome
CSS-Anweisung: .cursor { cursor: url('cursor.png'),crosshair; }
Grafikeigenschaft: Hintergrund transparent
Browser: Mozilla Firefox, Opera, Safari, Google Chrome
CSS-Anweisung: .cursor { cursor: url('cursor.jpg'),crosshair; }
Grafikeigenschaft: Hintergrund nicht transparent
(Grafiken im jpg-Format unterstützen keine Transparenzen)
Browser: Mozilla Firefox, Opera, Safari, Google Chrome
CSS-Anweisung: .cursor { cursor: url('cursor.bmp'),crosshair; }
Grafikeigenschaft: Hintergrund nicht transparent
(Grafiken im bmp-Format unterstützen keine Transparenzen)
Browser: Mozilla Firefox, Opera, Safari, Google Chrome

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 sinnvoll 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. ein anderes Dateiformat für die Cursor-Grafik verwenden
zu b) einen Alternativwert nach Wahl hinter dem 'url'-Wert anführen bzw. prüfen, ob vorhanden
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;
}

Einer ganzen Seite einen bestimmtem Mauszeiger zuweisen:

CSS-Regel mit dem Typselektor 'body':

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

Eine Anweisung im Html-Dokument ist hierfür nicht erforderlich!

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 ] __________________________



© 2007 - 2018 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:12 aktualisiert.