Wie kann ich ein anderes Bild für den Mauscursor definieren? Ich möchte z.B. ein Bild einer Lupe mit Plus-Zeichen als Mauscursor wenn ich über ein Vorschaubild fahre und ein Bild einer Lupe mit Minus-Zeichen wenn ich über ein Zoombild fahre. Ist das möglich?
Antwort: Ja und Nein!
Ja, es ist alleine mittels Stylsheets möglich, dies zu erreichen.
Nein, dies funktioniert leider noch nicht in allen modernen Browsern (IE 7, Firefox 2.0.0.3), wenn ein beliebiges Bild per url() geladen werden soll. Dies hat erst beim Safari 3.1.2 Browser funktioniert. Für die vordefinierten Cursor funktioniert es jedoch auf allen modernen Browsern.
Definiere die folgenden Styles entweder im Head-Abschnitt deiner HTML Seite oder in einer externen Stylesheet-Datei. Ich gehe davon aus, dass du weisst, wie man Stylesheets definiert. Im Beispiel seien die Lupen-Bildchen im Unterverzeichnis stuff abgelegt. Sie sind im Download enthalten.
<style type="text/css"> .Zoomable { cursor:url(stuff/magplus.gif), url(stuff/magplus.cur), auto; } #ZoomPic { cursor:url(stuff/magminus.gif), url(stuff/magminus.cur), auto; } </style>
Da nicht alle Browser Cursor-Bildchen vom selben Format laden können, muss eine Liste von verschiedenen Cursor-Bildchen angegeben werden.
Bei deinen Vorschaubildern musst du nun einfach nur noch die Klasse Zoomable zuweisen:
<a class="Zoomable" href="javascript:ZoomIn('pic1','images/bild1.jpg')" ><img id="pic1" src="images/bild1_klein.jpg" width="300" height="314" alt="..." ></a>
Durch die Zuweisung der Klasse Zoomable wird beim Überfahren des Vorschaubildes mit der Maus das Bild stuff/lupePlus.gif für den Cursor geladen.
Das Zoombild, das intern von der Zoom-Funktion für den Zoom-Effekt angelegt wird, hat die id="ZoomPic". Wenn du also für diese ID einen entsprechenden Style anlegst (Zeile 2), so wird beim Überfahren dieses Bildes ein entsprechend anderes Bild als Mauscursor eingeblendet.
Wie gesagt, funktioniert dies leider noch nicht recht auf allen modernen Browsern. Nur mit den eingebauten Cursor-Bildchen funktioniert es auf jeden Fall. Probier mal folgendes Stylesheet:
.Zoomable { cursor:move; } #ZoomPic { cursor:crosshair; }
Folgende Cursor-Werte können in einem Style verwendet werden:
cursor | Beschreibung |
---|---|
auto | automatischer Cursor (Normaleinstellung). |
default | Plattformunabhängiger Standard-Cursor. |
crosshair | Cursor in Form eines einfachen Fadankreuzes. |
pointer | Cursor in Form eines Zeigers. |
move | Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert. |
n-resize | Cursor in Form Pfeils, der nach oben zeigt (n = Norden). |
ne-resize | Cursor in Form Pfeils, der nach rechts oben zeigt (ne = Nordost). |
e-resize | Cursor in Form Pfeils, der nach rechts zeigt (e = Osten). |
se-resize | Cursor in Form Pfeils, der nach rechts unten zeigt (se = Südost). |
s-resize | Cursor in Form Pfeils, der nach unten zeigt (s = Süden). |
sw-resize | Cursor in Form Pfeils, der nach links unten zeigt (sw = Südwest). |
w-resize | Cursor in Form Pfeils, der nach links zeigt (w = Westen). |
nw-resize | Cursor in Form Pfeils, der nach links oben zeigt (nw = Nordwest). |
text | Cursor in einer Form, die normalen Text symbolisiert. |
wait | Cursor in Form eines Symbols, das einen Wartezustand signalisiert. |
help | Cursor in Form Symbols, das Hilfe zu dem Element signalisiert. |
url(Datei) | Beliebiger Cursor, Datei sollte eine GIF- oder JPG-Grafik sein. |