 System-Mauszeiger mit CSS
Auch wenn es ein wenig verspielt wirkt, manchmal ist es angebracht und für den Seitenbesucher ganz hilfreich, den angezeigten Cursor mit CSS festzulegen. Leider interpretieren die Browser solche CSS-Anweisungen unterschiedlich.
|
|
System-Mauszeiger mit CSS - Cursor festlegen
Querverweis:  eigene Mauszeiger mit CSS
Der Mauszeiger wird auf ihrem Bildschirm situationsabhängig unterschiedlich dargestellt. Im Browser beobachten Sie, dass der übliche Zeiger als Pfeil zum Beispiel zu einer Hand wird, sobald der Mauszeiger sich über einem Link befindet.
System-Cursor mit CSS
Mit den neuen Browsergenerationen haben Sie die Möglichkeit den Mauszeiger selbst festzulegen. Liste der Browser + Version:
 4.0  6.0  7.0  1.0  1.2  1.0
|
Mit CSS können den Cursor bestimmen, wenn Sie sich auf den Cursorvorrat ihres Systems beschränken. Bei der Grafik rechts (Symbol Textdatei) habe ich als Cursor den 'Help-Cursor' (Fragezeichen) festgelegt.
|
|
Die System-Courser:
              
Einbindung für die Grafik (Symbol Textdatei):
<a href="hilfedatei.txt" target="_blank" style="cursor:help;">
Hilfe-Datei anzeigen
</a>
CSS-Anweisungen
Um den üblicherweise angezeigten Cursor durch einen System-Cursor eigener Wahl zu ersetzen, können Sie CSS-Anweisungen für einen Link oder für andere Seitenelemente notieren. Eine Übersicht der zur Verfügung stehenden Mauszeiger und eine Testmöglichkeit finden Sie in der Tabelle unten. Hier ein Beispiel für die Einbindung:
Selector: cursor Wert: crosshair
<span style="cursor:crosshair;">testen: Fadenkreuz</span>
ergibt die Darstellung:  (zum Testen MouseOver)
Beispiele der Einbindung
<p onClick="javascript:xxx" style="cursor:help;">Hilfe</p>
<div style="cursor:crosshair;">Fadenkreuz</div>
<a href="hilfedatei.htm" target="_blank" style="cursor:help;">
Hilfe-Datei anzeigen
</a>
Übersicht und Testmöglichkeit
Zum Testen bewegen Sie den Mauszeiger über die Grafik "Testfeld" in der rechten Spalte.
| # | Wert | Beschreibung | Bild | Test |
|---|
| 01 | auto | Automatisch |  | |
| 02 | default | Standard | | |
| 03 | crosshair | Fadenkreuz | | |
| 04 | move | Bewegung (Ziehen) | | |
| Pfeile in Himmelsrichtung |
| 05 | n-resize | Pfeil Richtung N | | |
| 06 | ne-resize | Pfeil Richtung NO | | |
| 07 | e-resize | Pfeil Richtung O | | |
| 08 | s-resize | Pfeil Richtung S | | |
| 09 | se-resize | Pfeil Richtung SO | | |
| 10 | sw-resize | Pfeil Richtung SW | | |
| 11 | w-resize | Pfeil Richtung W | | |
| 12 | nw-resize | Pfeil Richtung NW | | |
| |
| 13 | pointer | Hand Link | | |
| 14 | text | Text Einfügezeichen | | |
| 15 | wait | Warten Sanduhr | | |
| 16 | help | Hilfe Fragezeichen | | |
| 17 | not-allowed | Nicht erlaubt | | |
| 18 | no-drop | AblageVerbot | | |
| 19 | all-scroll | Scrollen | | |
| 20 | url() | Benutzerdefiniert (gif) |  | |
| 21 | url() | Benutzerdefiniert (cur) |  | |
Demo: Cursor für den Textbereich geändert
Bewegen Sie den Mauszeiger über den Text!
Freilebende Gummibärchen gibt es nicht. Man kauft Sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt Sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.
Mauszeiger für die gesamte Seite
Möchte man für die gesamte HTML-Seite einen selbst definierten Mauszeiger einsetzen, notiert man die CSS-Angaben für den Cursor in den CSS-Block für den Body.
<style type="text/css">
<!--
body {
cursor:crosshair;
}
-->
</style>
Zentral definierter Hilfe-Mauszeiger
Beispiel: Mauszeiger in Form des Help-Symbols, der Hilfe-Informationen zu dem HTML-Element signalisiert. CSS-Anweisungen im Head für eine CSS-Unterklasse
<style type="text/css">
<!--
.maushilfe {
}
cursor:help;
-->
</style>
Link im Body
<a class="maushilfe" href="hinweisbox.htm">Hilfedatei</a>
Eigene Cursor - Mauszeiger mit CSS
Eigene Cursor - Mauszeiger mit CSS
| 
Home • Bilder • CSS • System-Mauszeiger mit CSS