HTML/CSS/JavaScript - Eine Animation ohne Flash

[obiwan1973]

Hallo zusammen,

ich hätte da eine knifflige Aufgabe - eine Animation mit Bordmitteln: HTML/CSS/JavaScript - ohne Flash.

Die Ist-Situation:
Ich habe eine Tabellenzelle (td-Tag).

Diese hat als Hintergrund (mit einmaliger Darstellung, also nicht gekachelt) ein Foto der Größe XY.

Nun möchte ich dieses Hintergrundfoto ohne Neuladen der Seite immer wieder wechseln, im 3-Sekunden-Rhytmus, das Ganze dann rotierend, d.h. nach dem fünften Bild kommt wieder das erste. Alle Bilder haben dieselbe Größe XY, alle dasselbe Format (PNG).

Mein Ziel, oder besser mein Plan:

Beim Laden der Seite hole ich mir alle 5 Bilder vom Server. Und dann starte ich eine JavaScript-Funktion, die die Hintergrundbilder rotieren lässt.
Das mit dem zeitlichen Rotieren bekomme ich hin.

Ich möchte aber nicht, dass die Bilder immer wieder vom Server geholt werden, deswegen die Idee, die Bilder in einem Stoß zu Beginn zu holen.

Das Wechseln des Hintergrundbildes dürfte mit JS laufen, indem ich die CSS-Eigenschaft des td-Tags ändere, irgendwie mit

td_diashow.style.background = ...

Aber wie sage ich dem JS, dass es auf Daten zugreifen soll, die bereits auf der Festplatte sind?

Und überhaupt:
Wie speichere ich am besten die Bilddaten beim Laden der Seite?
Als fünf <img>-Tags ???

Und dann müsste ich irgendwie sagen

td_diashow.style.background = img_02.src;

Aber dann holt er sich vermutlich das Bild erneut vom Server, oder?

Wie sage ich ihm, dass die Bilddaten bereits auf der Festplatte sind, in den <img>-Tags? Das muss doch mit CSS und JS irgendwie gehen.

Gruß und ein schönes WE!

Thomas

[JürgenB]

Hallo obiwan1973,

der Browsercache wird dein Problem lösen. Und wenn ein Besucher ihn abgeschaltet hat, muss er eben warten.

Gruß, Jürgen

[Matthias Apsel]

Om nah hoo pez nyeetz, obiwan1973!

* verwechsle nicht Tag und Element
* Felix' Artikel sollte deine Fragen auch beantworten

Matthias

[Der Martin]

Hallo,

ich hätte da eine knifflige Aufgabe - eine Animation mit Bordmitteln: HTML/CSS/JavaScript - ohne Flash.

sollte nicht allzu schwierig sein.

Die Ist-Situation:
Ich habe eine Tabellenzelle (td-Tag).

td-Element, nicht Tag.

Diese hat als Hintergrund (mit einmaliger Darstellung, also nicht gekachelt) ein Foto der Größe XY.
Nun möchte ich dieses Hintergrundfoto ohne Neuladen der Seite immer wieder wechseln, im 3-Sekunden-Rhytmus, das Ganze dann rotierend, d.h. nach dem fünften Bild kommt wieder das erste. Alle Bilder haben dieselbe Größe XY, alle dasselbe Format (PNG).

Die gleichbleibende Größe ist vom ästhetischen Standpunkt her schön, aber nicht notwendig. Der gleiche Typ auch nicht, das spielt für dein Vorhaben keine Rolle.

Mein Ziel, oder besser mein Plan:
Beim Laden der Seite hole ich mir alle 5 Bilder vom Server.

Warum?

Ich möchte aber nicht, dass die Bilder immer wieder vom Server geholt werden

Werden sie nicht. Dafür gibt's ja den Browser-Cache. Und wenn ein Nutzer den nicht bewusst verkorkst hat, werden die Bilder ab dem zweiten Aufruf nicht mehr vom Server geholt, sondern aus dem Cache. Nur beim allerersten Aufruf jedes Bildes gibt's eine kleine Verzögerung.

td_diashow.style.background = ...

Nimm besser backgroundImage, denn die Sammeleigenschaft background setzt auch alle anderen Werte (Hintergrundfarbe, Bildposition, Kachelung) wieder auf ihre Defaultwerte. Das willst du sicher nicht.

Aber wie sage ich dem JS, dass es auf Daten zugreifen soll, die bereits auf der Festplatte sind?

Gar nicht, wie gesagt. Das macht der Browser schon von allein.

Wie speichere ich am besten die Bilddaten beim Laden der Seite?

Auch am besten gar nicht.

Ciao,
 Martin