Patrick Andrieu: Skalierbarer Hintergrund mit Javascript

Beitrag lesen

Hallo Matti!

Da Felix bereits den ersten Teil Deiner Antwort beantwortet hat, übernehme ich den zweiten:

Der Bildwechsel ist dabei uninteressant. Gibt es dafür ein fertiges Script, dass man anpassen kann?

Gibt's sicher. Suchbegriffe schwer zu finden? Überlegen wir mal zusammen: Was passiert genau? Beim Laden der Seite wird ein zufällig ausgewähltes Hintergrundbild angezeigt. Jeder kennt die Bezeichnung von seinen CD-Player für die Zufallswiedergabe: random. Zusammen mit dem englischen Wort für Bild haben wir schon random image als Begriffe. Und mit dem Hintergrund: random background image. Wollen wir's mit JavaScript machen? Bitte sehr: javascript random background image.

Man kann sich sowas aber auch selber schreiben. Was braucht man? Zunächst eine Liste mit möglichen Hintergrundbildern:

var backgrounds = new Array();

Noch ist die somit erstellte Liste leer. Aber nicht lange. Mit:

backgrounds[0] = "/mein/background1.jpg";  
backgrounds[1] = "/mein/background2.jpg";

füllen wir sie mit Pfaden zu unseren Backgrounds.

Ach ja, wir brauchen jetzt eine Zufallsfunktion (engl.: random): Math() (random ist in der Liste der Methoden aufgeführt).

Mist, das liefert Fließkommazahlen - und auch noch »nur« zw. 0 und 1. Unsere Liste besteht aber nicht aus Hintergrund-Nr. 0,2345, Hintergrund-Nr. 0,09876 sondern aus Hintegrund-Nr. 1, Hintergrund-Nr. 2 (bzw. Hintergrund 0 und Hintergrund 1, da das erste Element einer Liste immer den Index 0 hat).

Irgendwie müsste man also zunächst runden... was hamma da zur Verfügung? Auf der eben verlinkten Seite sehe ich noch: Math.floor. Zitat: »Erwartet als Parameter eine Zahl. Liefert die nächstniedrigere Ganzzahl dieser Zahl zurück (Abrundung)«. Na, das wäre schon mal was... Behalten wir das im Kurzzeitgedächtnis, dem menschlichen Arbeitsspeicher.

Wie groß ist nun unsere Liste? 2 Elemente, wir wissen das ja, wir haben sie ja selbst erstellt. Aber weiß das auch JavaScript? Hm, schauen wir mal. Unser Liste ist ein Array. Was steht da als Eigenschaft? Bingo! length!

Und jetzt müssen wir aus allen diesen Dingens eine Zufallszahl aus den Elementen-Indizes unserer Liste machen. Math.random liefert eine Zahl zwischen 0 und 1 (genauer: die gleich oder größer als 0 und kleiner als 1 ist), die wir durch Math.floor abrunden. Also haben wir nur 0 als mögliche Zufallszahl. Na, das ist aber kein wirklicher Zufall, oder?

Grübel, grübel... wenn wir die Anzahl der Elemente mal der Zufallszahl von math.random multiplizieren und erst dann abrunden? Müsste doch gehen:

var zufallszahl = Math.floor(Math.random()*backgrounds.length);

alert(zufallszahl); // Bingo! Es kommt mal 0, mal 1 'raus

Somit hätten wir immer ein Element aus unserer Liste! Hm, und wie weisen wir das jetzt dem Hintergrund der Webseite zu?

Die Geschichte kann jetzt ein anderer Kollege übernehmen, ich muss mich anderen Sachen widmen ;) Aber vielleicht schaffst Du's jetzt auch alleine!

Viele Grüße aus Frankfurt/Main,
Patrick

--
_ - jenseits vom delirium - _

   Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?