webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

Der kleine Pfeil mal anders

| Keine Kommentare

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.

  1.  
  2. <body style="cursor: cusorart"...>
  3.  

2. Der Befehl wird zwischen den Tags eingefügt.

  1.  
  2. <style type="text/css">
  3. body {
  4. cursor: cursorart;
  5. }
  6. </style>
  7.  


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.

  1.  
  2. <b style="cursor:cursorart;">HALLO</b>
  3.  

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

  1.  
  2. <style type="text/css">
  3. b {
  4. cursor: wait;
  5. }
  6. </style>
  7.  

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.

Diese Artikel könnten dich auch interessieren: