Freitag, 24. März 2023
04:01
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 ] __________________________
Anzeigen
Info & Service
Anzeigen
Webhosting & Webspace
Finde den richtigen Anbieter für Dein Webprojekt [ ... ]
Tools & more
Nützliche sowie hilfreiche Tools und Anwendungen für Webmaster & Selbständige! [ ... ]
Marktplatz
Stelle mit einem ansprechenden Design Deine Produkte bei eBay mit einer Auktionsvorlage (eBay-Vorlage, Verkaufsvorlage) ins Rampenlicht
[ mehr Infos ]
Verdiene Geld mit Deiner Homepage und über 650+ Partnerprogramme von SuperClix! [ mehr Infos ]
1&1 Shop: alle Produkte & Leistungen im Ãœberblick
[ mehr Infos ]