Ihr habt Euch vielleicht schon einmal gefragt, warum auf manchen anderen Seiten euer Cursor anders aussieht, als er standardmäßig eingestellt ist? Dieser Effekt wird durch CSS (Cascading Style Sheets) ermöglicht und in diesem Artikel erkläre ich, wie Ihr diesen Effekt auf euren Seiten einbinden könnt.
Im Voraus ist zu sagen, dass derzeit nur wenige Browser diesen CSS-Effekt unterstützen. Allen voran der neue Opera 5.02 und Netscape 4.75. Wie der MSIE 5.5 unterstützt auch der neue Netscape 6 Browser diesen Effekt, jedoch nicht mit dem Funktionsumfang wie der MSIE.
Den Cursor auf der ganzen Seite ändern
Dafür gibt es zwei Möglichkeiten:
1. Man legt die Cursor-Art im Tag fest.
2. Der Befehl wird zwischen den Tags eingefügt.
cursorart muß hierbei mit dem gewünschten Code für den Cursor ausgetauscht werden. Eine Liste der Cursor-Arten ist weiter unten zu finden.
Hat man einen der beiden Codes erfolgreich in die Seite eingebunden, wird diese jetzt fast komplett mit dem gewünschten Cursor angezeigt. Die einzige Ausnahme sind Hyperlinks.
Elemente mit eigenem Cursor
Auf die Weise kann man jedem beliebigen Element einer Webseite einen eigenen Cursor zuweisen, z.B. <p>, <h1>-<h6>, <u>, <b> usw. Ob dies für alle Tags sinnvoll ist, ist wiederum eine andere Sache.
Auch hierfür hat man zwei verschiedene Möglichkeiten zur Auswahl:
1. In das Element einbetten.
HALLO
z.B. <b style="cursor:help;">Scully?</b> ergibt: Scully?
Diese Art von Formatierung hat den Vorteil, dass sich ausschließlich bei diesem Tag/Wort der Cursor verändert. In den anderen Bereichen der Seite wird immer noch der Standard-Cursor verwendet.
2. Zwischen die Tags
z.B. <b>Ja Mulder!</b> ergibt: Ja Mulder!
Bei dieser Art der Formatierung ändert sich der Cursor bei jedem <b> Tag auf der gesamten Seite. Spielt man hier und da mit dem Code, kann man diesen Effekt auch auf andere HTML-Tags übertragen.
(!) Es ist aber Vorsicht geboten, wenn der Cursor z.B. einen Wartezustand signalisieren soll. Dieser könnte dazu führen, dass der Nutzer denkt die Seite würde noch laden. Das wäre sicher nicht der gewünschte Effekt(!)
Liste der verschieden Cursor-Arten
| Cursorart | Aussehen |
|---|---|
| auto |
Normaleinstellung
|
| default |
Standard-Cursor
|
| crosshair |
Kreuz
|
| pointer (hand) |
Hand
|
| move |
Verschiebe-Kreuz
|
| n-resize |
Pfeil zeigt nach
oben |
| ne-resize |
rechts oben
|
| e-resize |
rechts
|
| se-resize |
rechts unten
|
| s-resize |
unten
|
| sw-resize |
links unten
|
| w-resize |
links
|
| nw-resize |
links oben
|
| text |
Text-Cursor (wie in
Word) |
| wait |
Wartezustand (meist
Sanduhr) |
| help |
Hilfe (meist Fragezeichen)
|
Es gibt noch eine andere Cursor-Art, bei der man selbst eine Grafik als Cursor bestimmen kann. Da dies nach einem Test in vier verschieden Browsern nicht funktionierte, habe ich diesen Befehl weggelassen.