WaBis

walter.bislins.ch

Zoom: Bild für Maus-Cursor definieren

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.

Anleitung

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; }

Cursor Styles

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.
Weitere Infos zur Seite
Erzeugt Donnerstag, 7. Januar 2010
von wabis
Zum Seitenanfang
Geändert Dienstag, 2. September 2014
von wabis