Anicursor - Tutorial: Wie man eigene Cursor in seine Webseite einbindet


Dierk's page

Home
Anicursor
Köln
Fotos
Dierk-Cam
Personalien
Awards
Excel-Tools
Anigifs

Zu Favoriten
Gästebuch

<a href="zaehlerd.html">Site Statistik</a>

Suchformulare

Suche in Seite

Suche in Site

Suche im Web

English

Deutsch

Wie man eigene Cursor in seine Webseite einbindet

Vorwort:
Dieses Tutorial erklärt, wie man den zur Verwendung eigener
Cursor auf der Homepage notwendigen Code in CSS und HTML
einbindet. Das Tutorial kann nicht die Grundlagen von CSS
und HTML vermitteln. Um mehr über CSS und HTML zu er-
fahren, schau also bitte im Internet nach entsprechenden
Informationen zu diesem Thema.

Im Zusammenspiel mit dem Microsoft Internet Explorer 6 oder 7 kannst Du auf Deiner Webseite statt den in Windows üblicherweise vorgesehenen Standardcursorn eigene statische oder animierte Cursor verwenden. Alles was Du dazu tun mußt ist, in den HTML-Code der Webseite oder in ein vorhandenes CSS-Stylesheet etwas zusätzlichen Code aufzunehmen und den gewünschten Cursor in Form der Cursor-Datei (*.ani oder *.cur) auf den Webserver hochzuladen. Jeder Surfer mit dem Internet Explorer 6 kann dann den von Dir vorgesehenen Cursor beim Besuch Deiner Webseite betrachten. Dein Cursor ersetzt den Windows Standardcursor allerdings nur innerhalb des Browserfensters über Deiner Webseiten-Oberfläche. Über der Scroll-Leiste oder der Bedienungsoberfläche des Browsers erscheint wieder der normale Windows Standardcursor.

Es gibt verschiedene Möglichkeiten, den gewünschten Cursor anstelle des Windows Standardcursors auf einer Webseite einzubinden. In den folgenden Beispielen habe ich die Cursor-Datei immer "cursor.ani" genannt. Wenn Du die entsprechenden Codestücke auf Deiner Webseite verwendest, mußt Du diesen Namen natürlich noch auf den Namen der von Dir gewünschten Cursor-Datei umändern. Andere Änderungen am Code müssen nicht vorgenommen werden, solange Cursor-Datei und Html-Dateien im gleichen Webverzeichnis gespeichert werden.

Also, nur den Namen der Cursor-Datei (rot markiert) im Code anpassen ! Beispiel:

<BODY style="CURSOR: url('cursor.ani')">

Die HTML-Datei mit dem Cursor-Code ins gleiche Webserver-Verzeichnis speichern wie die Cursor-Datei ...

Wird die Cursor-Datei in einem anderen Verzeichnis des Servers oder auf einem anderen Server abgelegt, muß dieser Pfad angegeben werden, z.B.:

<BODY style="CURSOR: url('http://www.beispiel.de/cursor.ani')">

OK, und nun die verschiedenen Möglichkeiten, den Cursor-Code einzubauen:

1. Etwas CSS-Code in jeder Webseite aufnehmen

Der eigene Cursor erscheint nur auf den Webseiten, auf denen auch der Code eingebunden ist

a) CSS irgendwo im <HEAD>-tag:

- für den normalen Pfeil-Cursor
(erscheint auf der ganzen Webseite inkl. Bildern, nicht jedoch über Links)

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

- oder für den Link-Cursor

(erscheint über Links)

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

- oder kombiniere beides
(natürlich sind auch verschiedene Cursor-Dateien möglich):

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

b) Code im <BODY>-tag

Erscheint auf Webseite inklusive Bildern, nicht aber über Links. Du mußt nur den folgenden Code in den <BODY>-tag einbinden:

style="CURSOR: url('cursor.ani')"

Somit sieht der ganze <BODY>-tag wie folgt aus:

<BODY style="CURSOR: url('cursor.ani')">

Falls bereits weitere Angaben im tag vorhanden sind, z.B. für zu nutzende Farben, kann der Code z.B. auch so aussehen:

<BODY BGCOLOR="#eeefff" style="CURSOR: url('cursor.ani')">

style="CURSOR: url('cursor.ani')"

2. Füge etwas Code in das CSS Stylesheet (*.css-Datei) ein

Der eigene Cursor erscheint auf allen Webseiten, die auf das Stylesheet verweisen und somit dort ihre Formatierungsvorgaben beziehen

Füge den Code

cursor: url('cursor.ani');

in das Stylesheet ein, beispielsweise:

- für die Webseite generell (Body) (umfaßt auch Bilder, keine Links):

body {cursor: url('cursor.ani');}

body {cursor: url('cursor.ani');}

- für Links:

a {cursor: url('cursor.ani');}

a {cursor: url('cursor.ani');}

- für Bilder:

a img {cursor: url('cursor.ani');}

a img {cursor: url('cursor.ani');}

3. Füge Code in einen einzelnen Link-tag ein:

Der eigene Cursor erscheint beim Berühren des Links

<a href="test.html" style="cursor:url('cursor.ani')">Example-page</a>

Dies ist ein Test-Link mit eigenem Cursor

style="cursor:url('cursor.ani')"

4. Füge Code in einen einzelnen Bild-tag ein:

Der eigene Cursor erscheint beim Überfahren des Bildes

<img src="image.jpg" style="cursor:url('cursor.ani')">

Test-Bild:

style="cursor:url('cursor.ani')"

5. Füge Code in eine Tabelle ein:

Wenn der Code in den <table>-tag eingebaut wird, erscheint der Cursor in allen Zellen der Tabelle.

<table style="cursor:url('cursor.ani')">

Test-Tabelle:

Hier ist der Cursor	Hier ist der Cursor
Hier ist der Cursor	Hier ist der Cursor

Der eigene Cursor kann auch auf eine oder mehrere Zellen beschränkt werden. Der enstprechende <td>-tag muß so aussehen:

<td style="cursor:url('cursor.ani')">

Test-Tabelle:

Hier ist der Cursor	Hier ist er nicht
Hier ist er nicht	Hier ist der Cursor

style="cursor:url('cursor.ani')"

Rangfolge von CSS-Vorgaben:
Die CSS-Vorgaben im zentralen CSS-Stylesheet sind für alle angebundenen Webseiten gültig.
Die CSS-Vorgaben innerhalb der <HEAD>-tags einer Webseite gehen auf dieser Webseite den Vorgaben im Stylesheet vor.
Die CSS-Vorgaben in einem Bild-tag oder Link-tag gehen den Vorgaben im <HEAD>-tag der Webseite vor.

Somit kannst Du z.B. einen eigenen Cursor im zentralen CSS-Stylesheet für alle verbundenen Webseiten als Standard definieren aber dennoch auf einzelnen Webseiten durch entsprechenden Code im <HEAD>-tag oder in einem Bild-tag oder Link-tag noch einen anderen eigenen Cursor nutzen.

	Anicursor Anicursor Startseite
	Tutorial Eigene Cursor herstellen