Random Image Code

view movie Click icon to view demonstration

I'm at the WebSource site which has a page that explains how to use JavaScript to create the random image effect.
http://www.web-source.net/web_development/random_images.htm

Many thanks to the author, William Bontrager for sharing this resource.

The first part of the explanation involves explaining how to name the images. You must use the same name for each image, and then add a number. The numbers must be sequential. In the example the author uses

I used the pattern of "photo1.jpg", "photo2.jpg" , etc... You can include as many images as you like, as long as you follow this naming convention.

Next the code you use to display the image and the Javascript code you place in the head of the document are discussed. This script was created before XHTML 1.0 standards so the code does not pass. I have modified it so it does pass.

I have a basic page which I will use as a way to learn how to create the random image code. I recommend you start with a simple page to learn, and then once you get it working, you can transfer the code to an actual Web site.

The basic code is in blue, the code for the random image is in mauve.

<!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>
<title>random image example</title>

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.

NumberOfImagesToRotate = 7;

// Specify the first and last part of the image tag.

FirstPart = '<img src="photo';
LastPart = '.jpg" height="225" width="300" alt="yard photo" />';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>


</head>
<body>

<h3>This is my random image</h3>

</body>
</html>

 

I need to modify the Javascript code in 2 ways.

First the code NumberOfImagesToRotate = 3; needs to be changed to
NumberOfImagesToRotate = 7; You will enter a number that matches the number of images you will be using.

Next the code which creates the image tag is modified.

the code is changed from

FirstPart = '<img src="logo'; to FirstPart = '<img src="logo;
LastPart = '.jpg" height="150" width="200">';

I change the FirstPart which contains the image name and the LastPart which has the height and width values. I also add an alt tag and the ending space /

FirstPart = '<img src="logo'; to FirstPart = '<img src="photo';
LastPart = '.jpg" height="225" width="300" alt="yard photo" />';

Next I decide where on the Web page the image will display. I decide to put it after the header tag. I add this code

<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>

Now I save the HYML file. I save the file in the "random" folder, one level above the sub folder named "yard-random". I prefer this system so you don't have to put the images and the web pages in the same place, it gets messy. Another detail, involves the yard-originals folder which is now inside the "random" folder. I suggest removing it before you load the "random" folder onto the web.

As I view the file in the browser I notice that the image is not displaying, instead I see the alt text. To be honest, I expected this to happen. The code from the example, assumes that you will place the html page and the images in the same place, since I have a sub folder for my images I need to modify the image src value to reflect the location of the images.

old code

FirstPart = '<img src="photo';

 

new code

FirstPart = '<img src="yard-random/photo';

I want to stress that you need to make sure that the path for where your images are placed will vary from site to site an you need to make sure you think carefully about this value to assure that the code works.

Now when I view the file in the browser an image displays. that image will never change unless I hit the reload button in the menu bar. Sometimes you may think the script is not working because the same 2 or 3 images keep showing up, but if you keep hitting reload eventually all seven images will appear.

Now let's validate the page. I am using the Firefox Web Developers Toolbar and select Validate Local HTML. If you select Validate HTML you will receive an error message. after validating the local file I see 1 warning and 1 error. The warning refers to a missing meta tag. If I add this code this warning will disappear.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

The error message is one I cannot eliminate since this is javascript code that invokes a function from the head of the document that then displays an image. I will have to live with this error.

Finally I want to review what needs to be loaded onto the Web in order for this code to work. You need to upload the "random.html" file and the folder named "yard-random". both those pieces must be on the Web for the script to execute correctly.

A page with the Random Image displaying