JavaScript

random image | rollovers | plugins

Visual Layout

JavaScript can give your content variety. A simple example of this is the use of the Math.random() function. Every time you refresh this page, the image below will change.



We can write sections of HTML with JavaScript, and by adding a random factor it is possible to make the content change each time the page is loaded. In this example, there is a two-dimensional array. Each element is a pair of values: the address of an image file, and a description of the image for the alt tag that goes with it.
function RandomImage()
{
 total=3;
 images = new Array(total);
 for (i=0; i <total; i++) {images[i]=new Array(2)}
 images[0][0] = "/~maxwellf/pianto.jpg";
 images[0][1] = "Pianto d\'Amore - de Chirico, 1974";
 images[1][0] = "/~maxwellf/gladiatore.jpg";
 images[1][1] = "Gladiatore nell\'arena - de Chirico";
 images[2][0] = "/~maxwellf/redchair.jpg ";
 images[2][1] = "Jeanne assise - Modigliani, 1918";
 RandomImageLong(images,"hspace=15",total);
}
Once we have populated our array, we send it to a separate function, with the number of elements in the array and an extra tag to go along with each image: a 15 point horizontal space.

The next function performs a random calculation based on the number of pictures available, and writes the image tag according to the image selected.
function RandomImageLong(images,iparams,total)
{
 ind = Math.floor(Math.random() *total);
 document.write("<img "+iparams+" src="+images[ind][0]+" alt=\""+images[ind][1]+"\">");
}
In order to load our image, we just have to call the first function, by inserting the following into an HTML file:
<SCRIPT language="JavaScript" SRC="changer.js">
RandomImage();
</SCRIPT>
One big advantage of this script is that it is in a javascript file (changer.js) separate from any particular web page. The three lines can be included in as many pages as is necessary, all referring to one single JavaScript file.