randomscripts

Random Background Image Script

This script selects a random background image every time the page is loaded. I originally wrote the script to trick people into thinking that I was updating my site all the time.

The script works by creating an array of the possible background images, selecting an array element based on a random number and then using JavaScript to write the <BODY> tag with the BACKGROUND attribute assigned to the selected array element.

First we need to create the standard <SCRIPT> tags in the document header (notice that the <BODY> tag is missing; we will get to that later):

1   <HTML>
2   <HEAD>
3   <TITLE>Random Background Script</TITLE>
4   <SCRIPT LANGUAGE="JAVASCRIPT">
5   <--
6 
7   //-->
8   </SCRIPT>
9   </HEAD>
10
11  </BODY>
12  </HTML>

Next, we need to create the array of images. In this example the array is named bgSel .

1   <HTML>
2   <HEAD>
3   <TITLE>Random Background Script</TITLE>
4   <SCRIPT LANGUAGE="JAVASCRIPT">
5   <--
6
7   bgSel = new Array(6);
8   bgSel[0] = "image1.gif";
9   bgSel[1] = "image2.gif";
10  bgSel[2] = "image3.gif";
11  bgSel[3] = "image4.gif";
12  bgSel[4] = "image5.gif";
13  bgSel[5] = "image6.gif";
14
15  //-->
16  </SCRIPT>
17  </HEAD>
18
19  </BODY>
20  </HTML>

Line 7 ( bgSel = new Array(6); ) establishes the array and sets the number of elements. Lines 8 through 13 set the contents of each array element, in this case to the name of an image file.

Now we need to generate the random number. The easiest way to do this is to establish a variable set to a random number that is generated each time the page loads. In this script the line

var bgNum = Math.round(Math.random() * 5)

establishes a variable named bgNum and sets its value to a random number between 0 and 5 using the Math.random() and Math.round() methods. The number used as a multiplier in the Math.round() method should be 1 less than the number of elements in your array. For instance, the array in this example has 6 elements so the multiplier is 5.

1   <HTML>
2   <HEAD>
3   <TITLE>Random Background Script</TITLE>
4   <SCRIPT LANGUAGE="JAVASCRIPT">
5   <--
6   var bgNum = Math.round(Math.random() * 5)
7
8   bgSel = new Array(6);
9   bgSel[0] = "image1.gif";
10  bgSel[1] = "image2.gif";
11  bgSel[2] = "image3.gif";
12  bgSel[3] = "image4.gif";
13  bgSel[4] = "image5.gif";
14  bgSel[5] = "image6.gif";
15
16  //-->
17  </SCRIPT>
18  </HEAD>
19 
20  </BODY>
21  </HTML>

Next we need to use the random number to extract an array element. This is done by establishing a variable (in this example, base ) whose value is the array element at the position defined by the random number:

var base = bgSel[bgNum];

1   <HTML>
2   <HEAD>
3   <TITLE>Random Background Script</TITLE>
4   <SCRIPT LANGUAGE="JAVASCRIPT">
5   <--
6   var bgNum = Math.round(Math.random() * 5)
7
8   bgSel = new Array(6);
9   bgSel[0] = "image1.gif";
10  bgSel[1] = "image2.gif";
11  bgSel[2] = "image3.gif";
12  bgSel[3] = "image4.gif";
13  bgSel[4] = "image5.gif";
14  bgSel[5] = "image6.gif";
15
16  var base = bgSel[bgNum];
17
18  //-->
19  </SCRIPT>
20  </HEAD>
21
22  </BODY>
23  </HTML>

Now that we have the randomly selected name of an image file, it is relatively easy to put it into the page. To do this, we put a script in place of the <BODY> tag and use the document.write() method to generate the <BODY> tag with the random image as the BACKGROUND attribute.

	<SCRIPT LANGUAGE="JAVASCRIPT">
	<--
	document.write("<BODY BACKGROUND='" + base + "'>");
	//-->
	</SCRIPT>

And here's the finished script:

1   <HTML>
2   <HEAD>
3   <TITLE>Random Background Script</TITLE>
4   <SCRIPT LANGUAGE="JAVASCRIPT">
5   <--
6   var bgNum = Math.round(Math.random() * 5)
7
8   bgSel = new Array(6);
9   bgSel[0] = "image1.gif";
10  bgSel[1] = "image2.gif";
11  bgSel[2] = "image3.gif";
12  bgSel[3] = "image4.gif";
13  bgSel[4] = "image5.gif";
14  bgSel[5] = "image6.gif";
15
16  var base = bgSel[bgNum];
17
18  //-->
19  </SCRIPT>
20  </HEAD>
21  <SCRIPT LANGUAGE="JAVASCRIPT">
22  <--
23  document.write("<BODY BACKGROUND='" + base + "'>");
24  //-->
25  </SCRIPT>
26  </BODY>
27  </HTML>

Note that you can have as many array elements as you want, and since the array only stores the image file names and does not pre-load the images themselves, the additional memory required is negligible.

That's all there is to it!