Eigener Lupen-Cursor mit reinem CSS (Update: Cross Browser-Lösung)

Ich wusste bisher nicht, dass man der CSS-Eigenschaft Cursor auch eine URL zuweisen kann, aber so steht es beim W3C geschrieben. Und nach meinen ersten Tests funktioniert es auch, zumindest mit Safari 3.1 und – man lese und staune – ab Internet Explorer 6.

Sehr nützlich ist das beispielsweise bei Bildern, die der User vergrößern kann. Wenn sich der Cursor über dem Bild zu einer Lupe verwandelt, ist das sicherlich meilenweit eleganter, als wenn man „Klicken zum Vergrößern“ als Tooltip in das title-Attribut des Bildes schreibt:

Und so geht’s

Sie brauchen eine Cursor-Datei im .cur-Format, das meines Wissen nur unter Windows erzeugt werden kann. Ich habe dafür das Freeware-Programm SC Icon Editor verwendet. Wenn Sie mit einer Plus- bzw. Minus-Lupe experimentieren wollen, können Sie die entsprechenden .cur-Dateien auch bei mir herunterladen und für beliebige Zwecke verwenden.

In Ihrer CSS Datei müssen Sie in einer geeigneten Klasse den Cursor definieren, der Wert pointer ist hier als Fallback für Browser gedacht, die mit der Cursor-URL nichts anfangen können:

cursor: url('/bilder/lupe.cur'), pointer;

Für die Minus-Lupe entsprechend:

cursor: url('/bilder/lupeminus.cur'), pointer;

Ich definiere den Lupen-Cursor in einer speziellen Klasse, die ich grundsätzlich allen Lightbox-Links sowieso schon zuweise, und den Minus-Lupen-Cursor in der Lightbox-ID.

Es gibt keinen Schritt 3 – das war’s schon. Firefox- Firefox-Mac- und Opera-User sehen selbst definierte Cursor bisher leider nicht, aber vielleicht schafft es dieses nützliche Feature ja noch in die finale Firefox 3-Version Firefox 3 Mac-Version. Bis dahin sollte man das „Klicken zum Vergrößern“ vielleicht doch noch zumindest unters Bild schreiben.

Update

Nach dem Hinweis von klaus in den Kommentaren kann ich jetzt eine Cross Browser-Lösung anbieten, die in Safari ab 1.2, in allen Firefox-Versionen ab 1.5 und im Internet Explorer ab 6.0 funktioniert. In Opera 9.2.6 Mac funktioniert es nicht, Flock, Camino etc. habe ich nicht getestet.

Für diese Lösung braucht man ein Extra-Stylesheet für den Internet Explorer, das man ihm per Conditional Comment zuweist.

In die normale CSS-Datei kommen für Safari und Firefox diese Cursor-Werte:

cursor: -webkit-zoom-in;
cursor: -moz-zoom-in; 

In die IE-CSS-Datei kommt die URL für die Cursor-Datei:

cursor: url('/bilder/lupe.cur'), pointer;

Damit sind 97% aller gängigen Browser abgedeckt.