Mauszeiger

Mauszeiger


Wenn ihr auf eurer Homepage mal nicht nur immer den Standart-Mauszeiger sehen wollt, könnt ihr diesen hiermit ändern.

Ich hab hier alle möglichen Mauszeiger aufgelistet:

progress : Zeiger mit Sanduhr
not-allowed : Verboten Symbol
no-drop : Hand mit Verboten Symbol
vertical-text : Vertikales Text Symbol
all-scroll : Scroll Symbol
col-resize : Größe-Horizontal-verändern Symbol
row-resize : Größe-Vertikal-verändern
crosshair : Fadenkreuz
hand : Linksymbol
wait : Sanduhr
help : Fragezeichen
e-resize : Pfeil nach rechts
s-resize : Pfeil nach oben und unten
w-resize : Pfeil nach links
n-resize : Pfeil nach oben
nw-resize : Pfeil nach links oben
ne-resize : Pfeil nach rechts oben
Text : Gerader Strich
Move : Ein Kreuz mit Pfeilen
pointer : Textsymbol
default : Standardwert

Wie ihr seht, ist das eine ganze Menge, doch wie setzt man das ein?
Ganz einfach, wenn ihr z.B: einen Link besonders deutlichen machen wollt:

<a href="link.htm" style="cursor : help;">Klick hier</a>

oder:

<a href="link.htm" style="cursor : not-allowed;">Hier nicht</a>

Ihr seht also, ihr müsst nur den Wert nach dem "cursor : ...."; ändern ;) eigentlich ganz einfach oder?
Man kann aber tolle Sachen damit machen.


Ein anderes Beispiel ist, dass der Mauszeiger auf der gesammten Seite vorgegeben ist:

<body style="cursor : crosshair;">

oder ihr wollt nicht, das bei einem Button der Mauszeiger wieder zum Pfeil wird:

<input type="button" value="faq" style="cursor : help;">


Normalerweise funktioniert dieser Code bei allen Objekten, die bei Webseiten eingesetzt werden, aber ich kann nichts garantieren...

Wenn ihr jetzt für den Cursor ein eigenes Bild verwenden wollt, benutzt folgenden Code:
<a href="#" style="cursor:url('gfx/beispiel.ani');">Link</a>

Hier befindet sich der Cursor im Verzeichnis "gfx".
Achtung !!! Der Cursor muss im *.ani Format sein!

Artikeldetails

Artikel-ID:
17
Kategorie:
Datum (erstellt):
12:31:41 10-02-2013
Aufrufe:
1,025
Bewertung (Stimmen):
(861)

Verwandte Artikel