Bestimmung der Mauszeiger Cursor mit CSS HTML Beispiel Download

Mauszeiger mit CSS

WWW.WEB-TOOLBOX.NET

ZURÜCK

SITEMAP

Mauszeiger festlegen

Auch wenn es ein wenig verspielt wirkt. Manchmal ist es angebracht und für den Seitenbesucher ganz hilfreich, den angezeigten Cursor mit CSS festzulegen. Ich denke da besonders an Hilfe-Links oder in Formularen, wo man das Hand-Symbol bei Buttons einbinden könnte. Unten sehen sie 2 Beispiele für eigene Cursor.

Nicht jeder Browser kann die Anweisung als Cursor-Grafik eine GIF-Datei einzubinden interpretieren. Testen sie die Funktion hier.

zum Testen: unsere Öffnungszeiten (Cursor: Uhr, alternativ: Pointer)
den Mauszeiger (rechts) dürfen sie herunterladen (GIF-Datei)

Zum Testen: Zu den Spielergebnissen (Cursor: Ball, alternativ: Pointer)
den Mauszeiger (rechts) dürfen sie herunterladen (GIF-Datei)

Mauszeiger mit CSS

Mit dem Eintrag Wert können sie unterschiedliche Cursor festlegen. Nicht alle werden auch von jedem Browser angezeigt. Eine Übersicht und eine Testmöglichkeit finden sie in der Tabelle unten. Hier ein Beispiel für die Einbindung:

Selector: cursor Wert: crosshair

<span style="cursor:crosshair;">testen: Fadenkreuz</span>

ergibt die Darstellung:

testen Fadenkreuz (zum Testen MouseOver)

4 weitere Beispiele der Einbindung

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

<p onClick="javascript:xxx" style="cursor:help;">Hilfe</p>

<div style="cursor:crosshair;">Fadenkreuz</div>

<a href="hilfe.htm" target="_blank" cursor:help;">
Hilfe-Datei anzeigen
</a>

Übersicht und Testmöglichkeit

#	Wert	Beschreibung	Test
01	auto	Automatisch	testen
02	default	Standard	testen
03	crosshair	Fadenkreuz	testen
04	move	Bewegung (Ziehen)	testen
Pfeile in Himmelsrichtung
05	n-resize	Pfeil Richtung N	testen
06	ne-resize	Pfeil Richtung NO	testen
07	e-resize	Pfeil Richtung O	testen
08	s-resize	Pfeil Richtung S	testen
09	se-resize	Pfeil Richtung SO	testen
10	sw-resize	Pfeil Richtung SW	testen
11	w-resize	Pfeil Richtung W	testen
12	nw-resize	Pfeil Richtung NW	testen

13	pointer	Hand Link	testen
14	text	Text Einfügezeichen	testen
15	wait	Warten Sanduhr	testen
16	help	Hilfe Fragezeichen	testen
17	not-allowed	Nicht erlaubt	testen
18	no-drop	AblageVerbot	testen
19	all-scroll	Scrollen	testen
20	url()	Benutzerdefiniert + Alternative	testen

Demo Cursor geändert

Bewegen sie den Mauszeiger über den Text!

Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam.

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 sehr hilfreich.

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' .

cur-Datei

Eigenen Mauszeiger als CUR-Datei testen

Beobachtungen: Funktioniert im FF 1.5, nicht im IE6

style="cursor:url(../images/grafik.cur),crosshair;"

ani-Datei

Animierten Mauszeiger als ANI-Datei testen

Beobachtungen: Funktioniert im IE6, nicht im FF 1.5

style="cursor: url('cursor.ani'),crosshair;"

Mauszeiger für die gesamte Seite

Möchte man für die gesamte HTML-Seite einen selbst festzulegenden Mauszeiger einsetzen, notiert die CSS-Angaben für den Curser in das Body-Tag oder in den CSS-Block für den Body.

<style type="text/css">
<!--
body {
cursor:crosshair;
}
-->
</style>

<style type="text/css">
<!--
body {
cursor: url('cursor01.ani');
}
-->
</style>

Beispiel: Zentral definierter Hilfe-Mauszeiger

Mauszeiger in Form des Help-Symbols, das Hilfe zu dem HTML-Element signalisiert

CSS-Anweisungen im Head

<style type="text/css">
<!--
.maushilfe {
}
cursor:help;
-->
</style>

Link im Body

<a class="maushilfe" href="hinweisbox.htm">Hilfedatei</a>

NACH OBEN