Question

I found this script to change the body’s background image when you click a link. It works, great except the only problem is is that I cannot have a pre-defined bg image in the css or else it won’t change.

So I remove the css for the background image and it switches the images fine, but I want an image to be default to start with.

Script:

    <script language="JavaScript">
<!--

var backImage = new Array(); // don't change this

backImage[0] = "images/bg0.png";
backImage[1] = "images/bg1.png";
backImage[2] = "images/bg2.png";
backImage[3] = "images/bg3.png";
backImage[4] = "images/bg4.png";
backImage[5] = "images/bg5.png";

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>

Link:

<a href="javascript:changeBGImage(1)">Change2</a>

And, for example, I want bg0.png to be the background by default when the page loads.

It would also be great if it was possible to fade between the bg images.

Thanks in advance.

Answer 1

Keep the background in the CSS, and use this code instead

var backImage = [
    "images/bg0.png",
    "images/bg1.png",
    "images/bg2.png",
    "images/bg3.png",
    "images/bg4.png",
    "images/bg5.png"
];

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
}