Web Cube

Cursor ändern

Cursor ändern


Was ist ein Cursor?

Cursor Bevor ich Ihnen erkläre, wie man den Cursor für seine Website ändert, sollten Sie wissen, was ein Cursor überhaupt ist. Falls Sie das schon wissen, können Sie diesen Absatz gerne überspringen. Der Cursor, auch Mauszeiger genannt, ist nämlich nur der kleine Pfeil, den man mit der Maus bewegt. Auf der linken Seite sehen Sie eine vergrößerte Abbildung eines klassischen Cursors in Windowsoptik.

Alternativen

Es gibt eine Reihe vorgegebener Cursor mit eigenem Namen, der später im CSS Code benötigt wird. Eine Auflistung dieser finden Sie am Ende dieses Abschnitts. Neben diesen Standardmauszeigern gibt es auch die Möglichkeit, Eigene zu verwenden. Auf der verlinkten Seite stelle ich Ihnen einige Beispiele zur Verfügung, die Sie gerne verwenden können.

default pointer crosshair help
text wait progress move
e-resize ne-resize nw-resize n-resize
sw-resize se-resize s-resize w-resize

Der Code

Natürlich fehlt jetzt nur noch eins, und zwar, wie man das Ganze in CSS umsetzen kann. Für die Bestimmung des Mauszeigers gibt es eine simple Codezeile, die Sie bevorzugt in den HTML-Block notieren sollten, es können aber auch die Cursor einzelner Bereiche geändert werden, beispielsweise über Bildern oder Links. Der Code lautet wie folgt:

Systemcursor: cursor:NAME;      Eigener Cursor: cursor:url('ADRESSE'), ALTERNATIVE;

Simpel, oder? Die großgeschriebenen Stellen müssen jeweils ersetzt werden. Da nicht jeder Browser die Änderung des Mauszeigers zulässt, muss bei Verwendung eines eigenen Cursors immer eine Alternative angegeben werden. Hier wird ein Systemcursor verwendet.

|   zurück zu "CSS Tutorials"   |   Grafiken "Cursor"   |
Es waren schon 37028 Besucher (166475 Hits) hier!
Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden