Javascript: CSS background-image ändern!

Mit Javascript lassen sich alle Elemente einer Webseite ändern: Auch die CSS Hintergrundbilder (background-image). So kann man per Javascript das Bild ändern: Zum Beispiel als Reaktion auf einen Klick oder einen mouseover Effekt.

In Javascript heißen die CSS Stile allerdings anders: Statt “background-image” heißt der Befehl dort “backgroundImage”:

 
CSS:

background-image:url('bild.jpg');

 
Javascript:

style.backgroundImage = "url('bild.jpg')";

 
Das funktioniert auch nachträglich, nachdem die Seite geladen wurde: Dann kann man über die ID eines DIVs dessen Hintergrundbild ändern:

<div id="bild" style="background-image:url('bild1.jpg');">

<script type="text/javascript">
document.getElementById('bild').style.backgroundImage = "url('bild2.jpg')";
</script>

Javascript: Background-Image dynamisch ändern

Das funktioniert aber auch dynamisch, zum Beispiel, indem man Zufalls-Werte oder Eingaben des Benutzers verwendet: Um eine Variable in den Bild-Aufruf zum Ändern des background-image einzufügen, sieht der Javascript Code so aus:

var zufall = Math.floor((Math.random() * 2) + 1);

document.getElementById('bild').style.backgroundImage = "url('bild-"+zufall+".jpg')";

Die würde dann zufällig die Datei bild-1.jpg oder bild-2.jpg als neues CSS background-image setzen.