JavaScript Mouse Cursor

Der Mauszeiger gibt dem Benutzer einen Anhaltspunkt darüber welche Aktionen an einem bestimmten Punkt im Browserfenster möglich sind oder zeigt an, dass das System derzeit mit der Verarbeitung von Informationen beschäftigt ist. Mit Hilfe von JavaScript kann das Erscheinungsbild des Mauscursors über CSS nach Bedarf verändert werden.

Aber auch die Position des Mauscursors läßt sich ermitteln. Dies geschieht über das Event-Objekt. Tritt ein bestimmtes Maus-Event auf, so ist es möglich dieses Event mittels Angabe eines Event-Handlers abzufangen und die Informationen des Event-Object auszulesen. Die Eigenschaften des Event-Objekts geben unter Anderem auch Auskunft über die Position der Maus zum Zeitpunkt des Auftretens des jeweiligen Events.

JavaScript Change Cursor Beispiel 1: Cursor ändern / setzen (set)

Im ersten Beispiel wird der Cursor der Maus durch Anklicken eines Links geändert. Über das Stylesheet des Body-Elements im aktuellen HTML-Dokument wird der angezeigte Mauscursor dokumentenweit auf einen angegebenen Cursor gesetzt. Mit dem onClick-Event wird ein Event-Handler verbunden. Hier wird allerdings keine Event-Handler-Funktion verwendet, sondern lediglich ein einziger JavaScript-Aufruf genutzt. Dieser Aufruf ändert den Mauscursor auf den im Link angegebenen Wert. Das darauf folgende „return false” verhindert, dass die Anzeige an den Seitenanfang springt. Wird die Maus nun an eine Position bewegt, die nicht mit einem Link belegt ist, so wird der ansgewählte Cursor angezeigt.

<a href="#" onclick="document.body.style.cursor = 'wait';return false">Global auf Wait setzen</a><br>
<a href="#" onclick="document.body.style.cursor = 'pointer';return false">Global auf die Hand (pointer) setzen</a><br>
<a href="#" onclick="document.body.style.cursor = 'default';return false">Global auf default setzen</a>

Global auf Wait setzen
Global auf die Hand (pointer) setzen
Global auf default setzen

JavaScript Cursor Beispiel 2: Cursor Hand (pointer)

Das nächste Beispiel setzt den Mauscursor auf 'pointer' (Hand). Hier wird, wenn die Maus in den Anzeigebereich des Banners eintritt, der Mauscursor auf ein Handsymbol gesetzt. Dies vermittelt den Eindruck, dass der Banner anklickbar ist.

<img src="pic/banner-partner-a.gif" border="1" onmouseover="this.style.cursor = 'pointer'" />

JavaScript Cursor Beispiel 3: Cursor Wait

Folgendes Beispiel setzt den Mauscursor auf „wait”. Hier wird die Sanduhr angezeigt, die dem Benutzer darauf hinweist, dass das System derzeit beschäftigt ist. Dieser Cursor kann bei einer Ajax-Anwendung auf einen noch nicht abgeschlossenen Verarbeitungsschritt hinweisen.

<img src="pic/banner-partner-b.gif" border="1" onmouseover="this.style.cursor = 'wait'" />

JavaScript Cursor Beispiel 4: Cursor Help

Der im nächsten Beispiel gesetzte Help-Cursor kann genutzt werden, wenn der Benutzer darauf hingewiesen werden soll, dass sich hinter einem Element nähere Informationen zu einem bestimmten Thema befinden. Hier kann beispielsweise, nachdem der Benutzer die Maus auf einem Element verweilen läßt, automatisch ein DIV-Element mit näheren Informationen geöffnet werden.

<img src="pic/banner-partner-c.gif" border="1" onmouseover="this.style.cursor = 'help'" />

JavaScript Cursor Beispiel 5: Cursor Text

Mit dem im nächsten Beispiel eingebauten JavaScript Code kann der Mauscursor in einen Textcursor verwandelt werden.

<img src="pic/banner-partner-a.gif" border="1" onmouseover="this.style.cursor = 'text'" />

JavaScript Cursor Beispiel 6: Cursor Move

Der Move-Cursor kann sinnvoll sein, wenn auf einer Internetseite eine Drag&Drop-Funktion realisiert wurde. Hier kann der Benutzer durch diese vom Betriebssystem her bekannte Variante des Mauscursors sehen, dass er ein Element im HTML-Dokument verschieben kann. Neben dem Move-Cursor existierten weitere Cursor-Varianten, die beim Vergrößern oder Verkleinern von Elementen genutzt werden können (n-resize - Pfeil gen Norden, ne-resize - Nord-Ost...).

<img src="pic/banner-partner-b.gif" border="1" onmouseover="this.style.cursor = 'move'" />

JavaScript Cursor Beispiel 7: Cursor Crosshair (Fadenkreuz)

Das Fadenkreuz ist beispielsweise sinnvoll, wenn eine Zeichenfunktion durch entsprechende JavaScript-Funktionen implementiert wurde.

<img src="pic/banner-partner-c.gif" border="1" onmouseover="this.style.cursor = 'crosshair'" />

JavaScript Cursor Beispiel 8: Mausposition ermitteln

Das Beispiel im unteren Code-Block zeigt, wie sich nach einem aufgetretenen Event die Position des Mauszeigers ermitteln lässt. Hierzu wird ein Event-Handler in Form der Function show_position implementiert. Aufgabe dieser Funktion ist es ein die Position der Maus zum Zeitpunkt des Auftretens eines Events zu ermitteln und in einem Status-Element auszugeben. Verbunden wird dieser Event-Handler mit dem Event onMousemove, das immer dann auftritt, wenn der Mauszeiger bewegt wird. Damit auf dieses Event überall im aktuellen HTML-Dokument reagiert wird, muss der Event-Handler dem Body-Tag des HTML-Dokuments zugeordnet werden.

Die Variable out dient der Speicherung einer Meldung, die im dazu definierten Ausgabeelement (SPAN mit der id info) am Ende der Funktion ausgegeben wird. Diese Meldung, die in Form eines Strings zusammengestellt wird, enthält die X- und die Y-Position des Mauscursors – diese Daten wurden zuvor über die Event-Eigenschaften abgefragt und in den Variablen x und y zwischengespeichert. Mit der Methode getElementById() wird ein Verweis auf das Ausgabeelement ermittelt. Dies geschieht mittels der id des Elements, die im HTML-Code in der ID-Eigenschaft des SPAN-Tags angegeben wird.

<span id="info">Bitte bewegen Sie die Maus, damt die Position ermittelt werden kann!</span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Event-Handler-Funktion, welche die Position des Mauscursors
// zum Zeitpunkt des Auftretens eines Events ermittelt und in
// einem Spanelement ausgibt
function show_position (event) {
  // X- und Y-Position des Mauscursors in Abhängigkeit des
  // Browsers ermitteln
  var x = document.all ? event.offsetX : event.pageX;
  var y = document.all ? event.offsetY : event.pageY;
  // Ausgabemeldung zusammenstellen
  var out = 'Mausposition: ' + x + ', ' + y;
  // Ausgabe im dafür vorgesehenen SPAN-Element
  document.getElementById ('info').firstChild.data = out;
}

// Event-Handler für das onMousemove-Event des Body-Tags
// festlegen
document.body.onmousemove = show_position;
// -->
</script>

Bitte bewegen Sie die Maus, damt die Position ermittelt werden kann!