Chaplineffekt

Demo

Autor: Ich

www.friedels-home.de

IE 4 IE 5 IE 6
Opa 5 Opa 6 Opa 7 Opa 8
NN 2 NN 3 NN 4 NN 6 NN 7
Moz 1 FF 0 FF 1

Wie du sehen kannst funktioniert das Script in allen halbwegs neuen Browsern. Außerdem ist es so gemacht, dass der eigentliche Seiteninhalt bei deaktiviertem JavaScript störungsfrei angezeigt wird.

Einbau

Benötigte Dateien


spot.gif

Für den Einbau wird ein Bild benötigt. Rechts kannst du das Bild sehen. Das Bild musst du dir kopieren. In den meisten Browsern kannst du das Bild kopieren indem du einen Rechtsklick darauf machst und im Kontextmenü "Speichern unter…" wählst. Am besten speicherst du das Bild mit dem Namen "spot.gif" im selben Verzeichnis in dem auch die Seite ist, in der du den Chaplineffekt verwenden willst. Falls das nicht klappt, mach einen Rechtsklick auf den Link "spot.gif" und wähle im Kontextmenü "Ziel speichern unter…". Wenn du willlst, kannst du natürlich auch unter einem anderen Namen und/oder in einem anderen Verzeichnis speichern. Aber dann musst du natürlich die entsprechenden Stellen im Script anpassen.

Außerdem brauchst du 2 Scriptdateien. Diese Dateien kannst du speichern indem du die entsprechenden Links mit der rechten Maustaste anklickst und auch hier "Ziel speichern unter…" wählst. Bitte klicke die Links nicht mit der linken Maustaste an. Dein Browser versucht sonst die Scipte aus zu führen. Das würde möglicherweise zu Fehlermeldungen führen und du kannst diese Seite vielleicht nicht mehr lesen. Hier sind die Links: chaplin-head.js und chaplin-body.js. Speichere die Dateien unter den Namen chaplin-head.js bzw. chaplin-body.js im selben Verzeichnis wie das Bild.

Deine Seite

Da ja der ganze Quellcode in den beiden Dateien chaplin-head.js und chaplin-body.js enthalten ist, brauchst du an deiner Seite nicht viel zu verändern. Füge einfach in den Head deiner Seite folgende Zeile ein:

<script type="text/javascript" src="chaplin-head.js"></script>

Es ist eigentlich egal, wo diese Zeile steht. Aber bei anderen Zeilen im Head ist es teilweise nicht egal ist wo sie stehen. Besonders die Zeilen , die sich an die Suchmachinen wenden, sollten möglichst früh kommen. Deshalb fügst du diese Zeile am besten als letzte Zeile im Head deiner Seite ein.

Als nächstes fügst du diese Zeile als erste Zeile in den Body ein:

<script type="text/javascript" src="chaplin-body.js"></script>

Zum Schluss fügst du noch folgendes in dein Bodytag ein:

onLoad="chaplin()"

Wenn den Bodytag vorher einfach nur <body> war, ist es jetzt also <body onLoad="chaplin()">. Wenn in dein Bodytag schon etwas eingefügt ist, aber nicht der Eventhandler onLoad, ergänzt du einfach onLoad="chaplin()". Das sieht dann also so aus: <body verschiedene_Zusätze onLoad="chaplin()">. Aber der Eventhandler onLoad darf nicht doppelt eingebaut werden. Deshalb musst du dann etwas anders vorgehen. Wenn es onLoad in deiner Seite bis her nicht gab, kannst du das folgende Kapitel überspringen.

Wenn es onLoad im Bodytag schon gibt

Wenn in deiner Seite schon ein Script eingebaut ist, das onLoad verwendet, musst du dieses onLoad um den Aufruf der Funktion chaplin() erweitern. Das machst du am besten mit einer zusätzlichen Funktion. Für so eine Funktion, die nach dem Laden der Seite die einzelnen Scripte initialisiert, verwendet man meist den Namen "init()". Jetzt musst du also erst mal feststellen, ob es in deiner Seite eine Funktion namens "init()" gibt. Dazu durchsuchst du den Quellcode deiner Seite nach der Zeichenfolge "init(". Die Klammer zu am Ende habe ich mit Absicht weg gelassen, denn es kann sein dass die Klammer nicht leer ist. Falls in die Seite externe Scripte eingebaut sind, musst du auch diese Scripte durchsuchen. Externe Scripte werden mit solchen Zeilen eingebaut, wie du eben welche eingefügt hast. Du musst also nach Zeilen nach dem Schema <script type="text/javascript" src="Scriptname"></script> suchen. Da wo ich jetzt Scriptname eigefügt habe, steht Name und Pfad der Datei in der du suchen musst. Falls es also schhon eine Funktion namens "init()" gibt, verwenden wir jetzut einfach "init2()". Natürlich musst du dann untersuc´hen, ob es schon eine Funktion namens "init2()" gibt. Wenn es die auch schon gibt nehmen wir eben "init3()" usw..

Jetzt musst du prüfen, ob es im Head deiner Seite einen Scriptbereich gibt. Das ist ein Bereich, der mit <script type="text/javascript"> anfängt und mit </script> endet. Er kann auch mit dem veralteten Tag <script language="JavaScript"> oder ähnlich anfangen. Meist folgt dem einleitenden Scripttag <!-- und vor </script> steht dann -->. Du solltest jetzt.nach <!-- folgendes einfügen:

function init() {
chaplin();
};

Zur besseren Übersicht kannst du danach eine Leerzeile einfügen.

Falls es bisher keinen Sriptbereich im Head gibt, musst du einen machen. Dazu fügst du

<script type="text/javascript">
<!--

// -->
</script>

in den Head ein. Dann geht es weiter wie eben beschrieben.

Jetzt musst du das, was bisher mit onLoad ausgeführt wurde in die Funktion chaplin() einbauen. Du fügst es unter der Zeile chaplin(); ein. Falls es nicht mit einem Semikolon geendet hat, ergänzt du ein Semikolon. Dann ersetzt du des alten Text bei onLoad durch init().

Beispiel:

Wenn dein Quellcode vorher so aussah:

<script type="text/javascript">
<!--
function irgendwas() {

};
// -->
</script>
</head>
<body onLoad="irgendwas()">

sollte er nachher so aussehen:

<script type="text/javascript">
<!--
function init() {
chaplin();
irgendwas();
};

function irgendwas() {

};
// -->
</script>
</head>
<body onLoad="init()">

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: