Random Background Image ScriptThis 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 First we need to create the standard 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 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 ( 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
establishes a variable named 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,
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 <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! Copyright © 2002 randomscripts, All Rights Reserved. Disclaimer |