Random Header Image With Javascript

To add a bit of variety to your website, you might want the header background image (or any image for that matter) to change everytime the page is loaded.

The following script is a simple way to do this using javascript

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Random Header Image :: Javascript</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="header">
    </div>
</body>
</html>

CSS

#header {
    width:800px;
    height:150px;
}

The only css needed for the example is to set a height and width for the #header div.

Javascript

<script type="text/javascript">
window.onload = function () {
    var header = document.getElementById('header');
    var pictures = new Array('images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
        header.style.background = 'url(' + pictures[chosenPic] + ')';
    }
}
</script>

Here we create an array of our chosen images, count how many images are in the array, create a random number using the Math object and use that to specify which image from the array to use. This then gets applied as the header background.

For a simple example, click here. The image will be different every time the page is refreshed.

Category: Javascript // 6 CommentsOpen my Lovebox

6 Responses to “Random Header Image With Javascript”

Rob Mason - Feb 18, 2009 at 3:41 pm

Good article. Could you extend it to not only randomise the image, but also switch it after a set period of time to another random image?
ElanMan - Feb 18, 2009 at 6:05 pm

Hi Rob,
To have the image change after a period of time, you could wrap the above code in its own function then use setTimeout to call it.
Example

<script type="text/javascript"> function RandImg() { var header = document.getElementById('header'); var pictures = new Array('images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg'); var numPics = pictures.length; if (document.images) { var chosenPic = Math.floor((Math.random() * numPics)); header.style.background = 'url(' + pictures[chosenPic] + ')'; } setTimeout(RandImg,2000); } window.onload = RandImg; </script>

I’ve put an example here which changes the image every 2 seconds.
http://www.elanman.co.uk/js_examples/random_image2.html.
Notice that sometimes the image doesn’t appear to change.
That’s because the same image can be selected randomly the next time the function is called. Having more images in the array will lessen the chances of this happening.
BlueCougar - Mar 1, 2009 at 7:11 pm

So, how would this be done with a javascript style switcher?
ElanMan - Mar 4, 2009 at 10:18 pm

Hi BlueCougar.
I’ll make a new post which combines this one and the ‘Simple Javascript Style Switcher’.
thomas - Sep 15, 2009 at 7:17 pm

hi,
yes this is what im looking for but i tried it on mine but nothing appears what things do i change in the code so it can work on mine i tried changing the pics do i put something in where it says url towards the end of the code
i checked out the link & its exactly what i want
anyways do i put my website in replacement of the one mentioned in the code?or do i not put one in there? like i said it seems to come up blank
ty hope i can find a code that actually works cause i know this one is exactly what im looking for
ty
Mars - Nov 14, 2009 at 10:07 am

Hi. Anyone know how to change the site header when switching styles. I’m using a style switcher from dynamic drive.

RSS

ElanMan