Change HTML background image

In a similar vein to changing the background colour of a HTML page, this script will allow you to change the background image. Add the following Actionscript and a movieclip with an instance name of "btn":

import flash.external.*;
var jsCall:String;
btn.onPress = function() {
 jsCall = String(ExternalInterface.call("changeBgImg", "myNewImg.jpg"));
};

Add the following Javascript to your HTML code:

<script language="JavaScript">
function changeBgImg(newBgImg) {
 document.body.background = newBgImg 
}
</script>

As before, you can still add a little random spice by using the following Actionscript:

import flash.external.*;
bgImages = new Array("film0.jpg", "film1.jpg", "film2.jpg", "film3.jpg", "film4.jpg", "film5.jpg", "film6.jpg", "film7.jpg", "film8.jpg", "film9.jpg");
var jsCall:String;
btn.onPress = function() {
 ranImg = bgImages[Math.floor(Math.random() * 10)];
 jsCall = String(ExternalInterface.call("changeBgImg", ranImg));
};

You can see an example here along with the code.

Note that this script will follow the default behaviour and cause your image to be tiled across your HTML background. If you don't want it to be tiled, try changing the script to this:

<script language="JavaScript">
function changeBgImg(newBgImg) {
 document.body.background = newBgImg
 document.body.style.backgroundRepeat='no-repeat';
 document.body.style.backgroundPosition='center';
}
</script>

You can see an example of a non-tiled image change here.