Mauszeiger formatieren
Mauszeiger über Elementen
Du kannst für jedes HTML-Element einen eigenen Mauszeiger definieren. Wird dann das betreffende Element mit der Maus überfahren, erscheint der definierte Mauszeiger. Probiere das ruhig mal bei folgendem Beispielcode aus:
<p style="cursor:crosshair;">Inhalt</p>
Du hast natürlich auch die Möglichkeit, den Cursor im head
oder in einer
externen
Ressource für ein Element zu definieren.
Möglich sind folgende Angaben (wenn Du die Maus über die jeweilige Angabe setzt, siehst Du das entsprechende Symbol):
auto- Cursor wird automatisch vom System gewählt (ist also wie bei der
Standardeinstellung über einem
aanders als über einemp!) default- standard-Cursor (meist ein Pfeil)
crosshair- einfaches Fadenkreuz
pointer- Linksymbol (meist eine Hand mit ausgestrecktem Zeigefinger)
- Achtung! Der IE verwendet auch
handfür denselben Zweck; das führt aber zu invalidem Code und wird von vielen anderen Browsern zu Recht nicht verstanden. Da der IEcursor:pointerversteht, sollte niemalshandverwendet werden. Außerdem ist der pointer nicht zwangsweise eine Hand – das ist abhängig von den Systemeinstellungen! move- kreuzförmiger Zeiger, der Verschiebbarkeit symbolisiert
n-resize- Pfeil mit Spitze nach oben
ne-resize- Pfeil mit Spitze nach rechts oben
e-resize- Pfeil mit Spitze nach rechts
se-resize- Pfeil mit Spitze nach rechts unten
s-resize- Pfeil mit Spitze nach unten
sw-resize- Pfeil mit Spitze nach links unten
w-resize- Pfeil mit Spitze nach links
nw-resize- Pfeil mit Spitze nach links oben
text- Textauswahl-Symbol
wait- Wartesymbol (meist eine Uhr oder Sanduhr)
help- „Hier-Hilfe“-Symbol (meist ein Fragezeichen)
url("pfad/datei"), text;- Eigener Cursor im *.gif, *.jpeg, *cur oder *.csr-Format (IE6)
- Hinweis: Laut W3C ist folgende Angabe zulässig:
p {cursor:url("mything.cur"), url("second.csr"), text;}, allerdings ist zur Zeit nicht bekannt, welche Browser diese Formatierung interpretieren. Der IE 6 kann es wenigstens mit einigen Formaten progress- Pfeil mit Wartesymbol (IE6)
not-allowed- Symbol für „verboten“. Kreis schräg durchgestrichen (IE6)
no-drop- Hand mit Symbol für „verboten“ (IE6)
vertical-text- Textsymbol um 90° gedreht (IE6)
col-resize- Symbol für Tabellenspalte ändern (IE6)
row-resize- Symbol für Zeilenhöhe ändern (IE6)
Siehe auch: http://www.w3.org/TR/REC-CSS2/ui.html#cursor-props
Diese Zusammenstellung erhebt keinen Anspruch auf Vollständigkeit, insbesondere deshalb, da der Internet Explorer hier wieder mal eigene Wege geht und möglicherweise noch mehrere Definitionen zulässt.
Darstellung in verschiedenen Browsern
Übrigens ist die exakte Anzeige nicht vorgeschrieben. Bei
cursor:wait z. B. wird zwar häufig eine Sanduhr verwendet,
aber von vielen Browsern auch ganz andere Uhren – Armbanduhren,
Wanduhren, alles, was das Herz begehrt. Beim
resize-Cursor ist häufig auch ein Doppelpfeil
anzutreffen, so daß z. B. cursor:n-resize und
cursor:s-resize sowie cursor:ne-resize und
cursor:sw-resize jeweils identisch aussehen. Es bringt
also nichts, dem Besucher zu schreiben: „Warten Sie, solange die
Sanduhr läuft.“ oder: „Ziehen Sie in Richtung der
Pfeilspitze.“
Sämtliche Formatierungen, die mit „(IE6)“ gekennzeichnet sind, sind kein gültiges CSS, sondern MSIE-spezifisch, deshalb werden diese Formatierungen, wie auch die Formatierungen der Scrollbalken vom W3C-Validator als Fehler erkannt. Wer Wert auf valides CSS legt, sollte diese Formatierungen meiden.
Anmerkung zum richtigen Einsatz
Noch etwas: Der Besucher erwartet bei cursor:pointer, daß
er klicken kann, bei cursor:help irgend eine Form der Hilfe
und Zusatzinformation (z. B. als tooltip
über das title-Attribut) und bei einem der
resize-Cursor, daß er auch
wirklich etwas in seiner Größe verändern kann. Wenn Du lediglich den
„cooleren“ Cursor ohne die entsprechenden Funktionen anbietest,
ist das nicht nur nicht professionell, sondern auch noch irreführend. Und
ein irregeführter Besucher sucht sich meist eine bessere Seite...
Auf diesen Seiten wird z. B. häufig der help-Cursor eingesetzt, aber nur dort, wo auch wirklich Informationen geboten werden. Leider versteht der Internet Explorer 6 die zugehörige Syntax nicht, so daß Nutzer dieses technisch veralteten Browsers etwas genauer hinschauen müssen. Übrigens: Die erwähnte Syntax stammt – wie praktisch alle CSS-Angaben auf diesen Seiten – aus dem Jahre 1998(!) und wird von allen modernen Browsern – Mozilla, Firefox, Opera, Konqueror, Safari – schon lange unterstützt. Gelegentliche Seitenhiebe auf den veralteten IE sind also gewollt und nicht unbegründet...
Viel Spaß!