Eigener Mauszeiger für Website

eigener Mauszeiger (cursor)

Damit der Mauszeiger eine andere Gestalt annimmt müssen hierfür einem HTML-Element die entsprechenden Zeigeroptionen definiert werden.
Sobald diese definiert sind nimmt der Mauszeiger innerhalb dieses HTML-Elementes die definierten Gestalten an.

Mit der Eigenschaft cursor: und der Cursorangabe kann das Aussehen des Mauszeigers definiert werden.


Demo:

eigene Mauszeiger über CSS definieren

Der Mauszeiger kann auch mit CSS-Angaben definiert werden.



Demo:



Um den Mauszeiger auf der ganzen Seite zu verwenden wird dieser einfach dem body Element hinzugefügt.



Zudem können die exakten Koordinaten des Mauszeigers (Spitze) definiert werden.

Cursor Eigenschaften

Folgende Cursor Eigenschaften sind schon vordefiniert:

Beispiel: <style="cursor: pinter;">

Eigenschaft	Beschreibung
auto	automatischer Cursor
default	plattformunabhängiger Standard-Cursor
none	kein Cursor
pointer	Zeiger z.B. für Verweise
help	Signalisiert eine Hilfe um Element
context-menu	signalisiert, dass ein Context-Menü erreichbar ist
all-scroll	signalisiert, dass der Inhalt eines Elements in jede Richtung scrollbar ist
wait	signalisiert einen Wartezustand
progress	signalisiert einen Programmfortschritt
text	symbolisiert normalen Text
vertical-text	symbolisiert vertikalen Text
crosshair	einfaches Fadenkreuz
cell	symbolisiert eine Tabellenzelle
alias	symbolisiert das Erstellen einer Verknüpfung
copy	symbolisiert das Erstellen einer Kopie
move	symboliersiert ein bewegliches Element
no-drop	Element kann hier nicht fallen gelassen werden
not-allowed	die gewünschte Aktion ist nicht erlaubt
n-resize	Pfeil der nach oben zeigt (Norden)
s-resize	Pfeil der nach unten zeigt (Süden)
e-resize	Pfeil der nach rechts zeigt (Osten)
w-resize	Pfeil der nach rechts zeigt (Westen)
ne-resize	Pfeil der nach oben rechts zeigt (Nordost)
se-resize	Pfeil der nach rechts unten zeigt (Südost)
nw-resize	Pfeil der nach links oben zeigt (Nordwest)
sw-resize	Pfeil der nach links unten zeigt (Südwest)
col-resize	Spaltenbreite kann verändert werden
row-resize	Zeilenhöhe kann verändert werden
zoom-in	Element kann vergrössert werden
zoom-out	Element kann verkleinert werden