Smilieregen

Autor: Ich

www.friedels-home.de

 

IE 5 IE 6 IE 7 NN 7 NN 8 Moz 1 Opa 8 Opa 9 FF 1 FF 2

Die Idee zu diesem Script ist schon recht alt und sie stammt nicht von mir. Schon lange gibt es derartige Scripte und die meisten derartigen Scripte sind daher schon sehr alt. Sie benutzen Techniken, die heute nicht mehr dem Standard entsprechen und sie funktionieren nur in einigen Browsern. Auch auf meiner Homepage wurde lange Zeit ein solches Script vorgestellt. Aber jetzt habe ich doch endlich ein neues Script geschrieben, das neuere Techniken benutzt und in allen geeigneten Browsern und auch in zukünftigen Browsern funktionieren wird.

Wie du bestimmt jetzt schon festgestellt hast, erschwert das Script das Lesen erheblich wenn die Bilder vor dem eigentlichen Seiteninhalt sind. Deshalb erst mal ein Link mit dem du den Regen hinter den Text bringst:

Nachdem du gesehen hast, wie das Script im Hintergrund wirkt, kannst du es jetzt beenden damit du beim Lesen nicht gestört wirst.

Script beenden

Der Bilderregen funktioniert nur in einem Bereich, der so breit und so hoch wie das Fenster ist. Wenn die Seite also größer als das Fenster ist und der Benutzer nach unten scrollt, fällt im unteren Teil der Seite kein Regen. Das kann man umgehen, indem man den eigentlichen Seiteninhalt in einen Bereich macht, den man hinter (oder vor) dem Bilderregen vorbeiscrollt. Dann bleibt der Regen natürlich im ganzen Fenster sichtbar.

Wie du das Script in deine Seite einbauen kannst.

Ich gehe davon aus, dass der sonstige Inhalt deiner Seite schon feststeht. Ich werde hier zunächst die Variante des Scripts beschreiben, wo der Regen vor dem eigentlichen Seiteninhalt fällt und wo beim Scrollen der eigentliche Seiteninhalt hinter dem Regen verschoben wird, sodass es immer im ganzen Fenster regnet (so wie hier). Dabei werde ich die Stellen farblich hevorheben, die in anderen Varianten geändert werden müssen und diese Änderungen danach beschreiben.

Die Bestandteile

Das ganze besteht aus der Htmlseite in die das Script eingebaut werden soll, den Bildern, die für den Regen benötigt werden und einer Scriptdatei. Die Scriptdatei kannst du downloaden indem du diesen Satz anklickst. Ich habe die Datei extra in regen.zip umbenannt, damit in allen Browsern auf die gleiche Weise der Download angeboten wird. Speichere die Datei im selben Ordner ab, in dem auch die Seite ist in die das Script soll. Benenne die Daiei um in regen.js. Wahrscheinlich bekommst du einen Warnhinweis von deinem Betriebsystem, der besagt , dass die Datei dadurch möglicherweise unbrauchbar wird. Du ändest die Dateiendung trotzdem. Falls dein Browser dir keine Option zum Speichern der Datei anbietest, wenn du den Link anklickst, versuche ihn mir der rechten Maustaste an zu klicken und dann im Kontextmenü die Option "Ziel speichern unter …" oder entsprechendes zu wählen.

Der Umbau der Htmlseite

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titel deiner Seite</title>
</head>

<body>
Hier steht der Inhalt deiner Seite
</body>
</html>

Dies ist der Quellcode einer beliebige Htmlseite. Deine Seite, in die das Script eingebaut werden soll, sollte vor dem Einbau etwas so aussehen. Die Teile, die ich in roter Schrift dargestellt habe, sehen bei dir natürlich anders aus. Außerdem kann deine Seite natürlich schon viele weitere Zeilen im Head enthalten.

Füge in den Head (zum Beispiel unter die Zeile <title>Titel deiner Seite</title>) folgendes ein:

<script type="text/javascript">
<!--
var anzahl=50;
var schritte=200;
var zeit=40;
var hoch=0;
var bild=new Array("ballon-rd.gif", "ballon-ye.gif", "ballon-vio.gif", "smilie.gif", "favic_ws.gif", "046.gif", "005.gif", "006.gif", "036.gif", "054.gif", "055.gif", "057.gif");
//-->
</script>
<script type="text/javascript" src="regen.js"></script>

Hier habe ich die Teile des Quelltextes rot geschrieben, die du anpassen kannst oder musst.


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