ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

Eigener Mauszeiger für Website

Eigener Mauszeiger für Website

Inhaltsverzeichnis:
  - eigener Mauszeiger
  - CSS Mauszeiger
  - Eigenschaften

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.

HTML Code
<div style="cursor: url(zeiger.ico), auto;">
<br><br><br><br>
</div>

Demo:






eigene Mauszeiger über CSS definieren

Der Mauszeiger kann auch mit CSS-Angaben definiert werden.

CSS Code
#tick { cursor: url(tick.ico), auto; }
#cross { cursor: url(cross.ico), auto; }

HTML Code
<div id="tick">Feld mit einem Tick-Cursor</div>
<div id="cross">Feld mit einem Cross-Cursor</div>

Demo:
Feld mit einem Tick-Cursor



Feld mit einem Cross-Cursor




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

CSS Code
body {cursor: url(zeiger.ico), auto;}


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

CSS Code
/* element { cursor: url('cursor.ico') linkerrand obererrand, auto; } */
#tick{ cursor: url('cross.ico') 8 8, auto; }


Vorsicht
Die Angabe einer alternativen Cursorform ist zwingend (z.B. auto)

Hinweis
Es können auch andere Bildformate wie .gif (für animierte Cursor)verwendet werden, jedoch werden diese nicht von allen Browsern unterstützt.
Es kann hierbei auch mit einem Fallback gearbeitet werden:
#ja { cursor: url(tick.png), url(tick.gif), url(tick.cur), auto; }


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



Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.

Alexander7 08.12.2020 19:33
Cool, super Sache.

*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Free YouTube Video Music
Youtube gratis Musik für Youtube Videos
Anzeige
Spenden
ROG Innovation unterstützen