eigene Mauszeiger mit CSS
    
 Home • Bilder • CSS • eigene Mauszeiger mit CSS Beispiel

 eigene Mauszeiger mit CSS

Auch wenn es ein wenig verspielt wirkt, manchmal ist es angebracht und für den Seitenbesucher ganz hilfreich, den angezeigten Cursor mit CSS festzulegen. Leider interpretieren die Browser solche CSS-Anweisungen unterschiedlich.
Mauszeiger als gif- cur- oder ani-Datei

Querverweis: System-Mauszeiger mit CSS

Den Mauszeiger innerhalb Ihrer HTML-Dateien können Sie situations- und themenabhängig mit eigenen Grafiken darstellen (lassen). Der von Ihnen festgelegte Cursor wird angezeigt, sobald der Mauszeiger sich z.B. über einem Link befindet. Aber auch für andere Bereiche lassen sich (auch ohne Link) bestimmte Cursor festlegen.

Demos:  Halloween-Link 01  Halloween-Link 02  Halloween-Link 03


Testen Sie ihren Browser hier. Ich verwende als Grafik Cursor als gif-Datei, cur-Datei und ani-Datei. Als Standard Curser (Alternative) habe ich das 'Cross-Symbol festgelegt:

gif-Datei
testen
   

cur-Datei
testen
     

ani-Datei
testen
   


   Eigene Cursor mit CSS bestimmen

Hinweis: Nicht jeder Browser kann die CSS-Anweisung eine eigene Cursor-Grafik einzubinden interpretieren. Das führt aber nicht zu einem Anzeigefehler, da in einem solchen Fall der als Alternative eingetragene Cursor / der übliche Cursor angezeigt wird.

Ich empfehle die Verwendung einer CUR-Datei!


Mauszeiger über den Text bewegen

Beispiele: CUR-Datei als Cursor  (IE, Firefox, Safari, Google Chrome)

style="cursor:url(cur134.cur),pointer;"
Grafik: transparent
Mauszeiger gefunden bei http://www.cursors-4u.com/cursors/

style="cursor:url(weihnacht01.cur),pointer;"
Grafik: transparent
Mauszeiger gefunden bei http://www.cursors-4u.com/christmas/

style="cursor:url(weihnacht02.cur),pointer;"
Grafik: transparent
Mauszeiger gefunden bei http://www.cursors-4u.com/christmas/

style="cursor:url(weihnacht03.cur),pointer;"
Grafik: transparent
Mauszeiger gefunden bei http://www.cursors-4u.com/christmas/

style="cursor:url(weihnacht04.cur),pointer;"
Grafik: transparent
Mauszeiger gefunden bei http://www.cursors-4u.com/christmas/

style="cursor:url(weihnacht05.cur),pointer;"
Grafik: transparent
Mauszeiger gefunden bei http://www.cursors-4u.com/christmas/


Beispiele: GIF-Grafik als Cursor  selbst erstellt  (Firefox)

style="cursor:url(mauszeiger-uhr.gif),pointer;"
Grafik: transparent
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei)

style="cursor:url(cursor-ball.gif),pointer;"
Grafik: Hintergrund transparent
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei)

style="cursor:url(zeiger-weihnacht.gif),pointer;"
Grafik: Hintergrund transparent
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei)

style="cursor:url(zeiger-weihnacht02.gif),pointer;"
Grafik: Hintergrund transparent
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei)

style="cursor:url(zeiger-weihnacht03.gif),pointer;"
Grafik: Hintergrund transparent / weiß
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei)

style="cursor:url(zeiger-kalender01.gif),pointer;"
Grafik: Hintergrund transparent / weiß
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei

style="cursor:url(zeiger-kalender02.gif),pointer;"
Grafik: Hintergrund transparent / weiß
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei

style="cursor:url(zeiger-kalender03.gif),pointer;"
Grafik: Hintergrund transparent / weiß
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei

style="cursor:url(zeiger-kalender04.gif),pointer;"
Grafik: Hintergrund transparent / weiß
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei

style="cursor:url(zeiger-rechtsklicken01.gif),pointer;"
Grafik: Hintergrund transparent / weiß
den Mauszeiger (rechts) dürfen Sie herunterladen (GIF-Datei


Einbindung für einen Link:

<a style="cursor:url(Grafik-URL),AlternativerCursor;" ... >

<a style="cursor:url(zeiger-weihnacht03.gif),pointer;" ... >
Sie können die Cursor nicht nur für Links festlegen. CSS-Anweisungen für alternative Mauszeiger können Sie auch für andere Seitenelemente notieren. Allerdings werden diese alternativen Cursor nicht von jedem Browser angezeigt. Mehr Infos unten.

Beispiel für einen Absatz 

<p style="cursor:url(mauszeiger-uhr.gif),pointer;">Öffnungszeiten</p>







   Browserunterschiede eigene Mauszeiger

Der Internet Explorer unterstützt als Formate lediglich 'cur' und 'ani'. Firefox unterstützt als Formate 'ani' nicht und mit dem Betriebssystem Linux 'cur' nicht.

Da diese Anweisung nicht von jedem Browser verstanden wird, ist die Technik hinter dem Komma einen alternativen Cursor einzutragen empfehleswert.

1  gif-Datei

Eigenen Mauszeiger als GIF-Datei testen

Beobachtungen: Funktioniert im FF 1.5, nicht im IE6 		    
style="cursor:url(../images/grafik.gif),crosshair;"
Alternativ dazu das Dateiformat 'ani' oder 'cur' für (animierte) Mauszeiger. Statt einer statischen JPG- oder Gif- grafik, wird eine Animation eingebunden. Erlaubte Dateiendungen: 'ani' oder 'cur' .

2  cur-Datei

Eigenen Mauszeiger als CUR-Datei testen

Beobachtungen: Funktioniert FF ab 1.5, IE, Chrome, Safari 		      
style="cursor:url(cur134.cur),crosshair;"
3  ani-Datei

Animierten Mauszeiger als ANI-Datei testen

Beobachtungen: Funktioniert im IE6, nicht im FF 1.5 		    
style="cursor: url(cursor.ani),crosshair;"




   Inline-Anweisung - Mauszeiger für einen Link

Hier habe ich den Link auf die Anwendungsbeispiele für meine kostenlosen Advertskalender-Vorlagen mit einem Weihnachtmauszeiger 'geschmückt'. Im Beispiel / in der Demo für dieses Anwendungsbeispiel sehen Sie ebenfalls einen Weihnachts-Cursor im Einsartz (link im Kopfbereich der Seite).

14 kostenlose Adventskalender der Web-Toolbox 
<a href="adventskalender.htm" style="cursor:url(weihnacht05.cur),crosshair;">
14 kostenlose Adventskalender der Web-Toolbox
</a>



   Mauszeiger für die gesamte Seite

Möchte man für die gesamte HTML-Seite einen selbst festzulegenden Mauszeiger einsetzen, notiert man die CSS-Angaben für den Cursor in den CSS-Block für den Body. 
<style type="text/css">
<!--
body {
cursor: url(cursor01.ani);
}
-->
</style>



   Beispiel: Zentral definierter Hilfe-Mauszeiger

CSS-Anweisungen im Head 
<style type="text/css">
<!--
.animiert {
}
cursor: url(cursor01.ani);
-->
</style>
Link im Body 
<a class="animiert" href="hinweisbox.htm">Hilfedatei</a>



   Mauszeiger als Cur-Dateien


1  Hier verwendete Cursor-Grafiken

GIF Download
cur134.cur
cur138.cur
weihnacht01.cur
weihnacht02.cur
weihnacht03.cur
weihnacht04.cur
weihnacht05.cur





2  Wo bekommen Sie Cur-Dateien?

a) Download

Cursor finden Sie bei: http://www.cursors-4u.com  (vorgeschaltete Werbung, 'SKIP' klicken)


b) Selbst erstellen

Sie können auch online eine CUR-Datei selbst erstellen. Dazu stehen auf der Seite

www.rw-designer.com

ein Editor mit einfachen Zeichenwerkzeugen bereit.







System-Mauszeiger mit CSS

NACH OBEN