Das ganze Bild besteht aus drei mal neun Bilder, alle in Je einem Layer absolut positioniert.
Wovon immer drei Layer übereinander liegen.
Bild 1 - 9 sind die Deckbilder. Unter diesen wurde zweimal das selbe Bild abgespeichert; dasjenige, das nach dem Rubeln in den Vordergrund kommt.

Im Head wirden zuerst innerhalb eines Stylesheets alle Bilder geladen.
Die Funktion init() wird im Body-Tag mit einem ondoad aufgerufen, und danach die einzelenen Layer. Wie dies genau gemacht wird sehen Sie im Quelltext.

Hier das JavaScript das Sie dazu benötigen.
Es besteht aus dem ersten Teil, zum wegrubeln des Bildes, und dem zweiten Teil, der dem Mauszeiger den Schwamm übergibt.

Das Script zum Rubeln und für den Schwamm

Die HTML-Seite, das JavaScript und das Schwammbild müssen im selben Ordner abgelegt werden.

zurück zu Tips und Tricks

erufer@bluewin.ch