decocode decocode deco    

Mauszeiger #

W3C Standard

Über die Eigenschaft cursor kann festgelegt werden, welche Gestalt der Mauszeiger annimmt, wenn er über das entsprechende Element fährt. Die Eigenschaft kann einen der folgenden Werte annehmen (beim Überfahren der Werte mit dem Mauszeiger wird die entsprechende Grafik angezeigt):

auto – veränderlich je nach Kontext
default – Standardgrafik (meist ein Pfeil)
crosshair
pointer
move
n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
text
wait
help
progress

Hier ein Beispiel:

Quelltext auswählen
1
2
3
<div>
  <img style='cursor:help;height:50px;width:50px;' src='img/orangebox.png' alt='Box'>
</div>

Dieser Code führt zu folgender Darstellung:

Box

Außerdem ist es möglich, eine eigene Grafik zu verwenden. Dazu notiert man zusätzlich zu der Dateireferenz einen alternativen Wert, der verwendet wird, wenn der Browser die angebotene Grafik nicht unterstützt oder findet:

cursor:url("img/cursor.png") 12 12,default;

Die Zahlen hinter der Pfadangabe geben von links oben gerechnet die vertikale und horizontale Position des Hotspots an, des aktiven Pixels der Grafik, der außer in cur-Grafiken nicht in der Grafik selbst gespeichert wird. Diese Notierung ist allerdings erst Bestandteil von CSS3.

Mit dem Programm JustCursors kann man sich eine einfache cur-Datei mit Hotspot selbst erstellen. Dieses Programm funktioniert sogar unter Linux mit Wine.

Ob ein Browser diese Option unterstützt, kann man hier testen:

CSS2 SVG PNG GIF JPG BMP CUR
CSS3 SVG PNG GIF JPG BMP CUR
Firefox ≥ 4alle Formate
Firefox 3.6alle Formate außer SVG
Chrome ≥ 10alle Formate
Safari 5alle Formate außer SVG
Midori 0.2.2alle Formate außer SVG
MSIE 7nur cur-Grafiken bei CSS2
Opera ≤ 11keine Unterstützung