random images
Free JavaScripts provided
by The JavaScript Source
There is a nice picture in the space above - but that's nothing special. However, if you come back to this page later (or reload the page) you will see a different image. The script on this page randomly selects an image from a group and displays it.
This example requires three parts: the script in the header section and the pictures, an ONLOAD trigger in the opening <BODY> tag, and the images, all of which must be the same type and size. The pictures I'm using are 250x250 pixel JPEG files. You will also need a graphic the same size which matches the background (mine is white).
If you're using GoLive as your web editor, use these instructions for woking with that program.
To add this show to your page, copy the script from the header of this page (or from this page) to the header section of your page. Then find theses lines:
images[1] = new Image();
images[1].src = "images/slide1.jpg";
images[2] = new Image();
images[2].src = "images/slide2.jpg";
images[3] = new Image();
images[3].src = "images/slide3.jpg";
images[4] = new Image();
images[4].src = "images/slide4.jpg";
images[5] = new Image();
images[5].src = "images/slide5.jpg";
and change the part that says "images/slide1.jpg" to fit your situation. You can put as many slides in the show as you want (just reproduce the pattern in the script) but take into consideration how much time it will take to send all your pictures to your visitor, especially if they have a modem connection.
The next step is to put this line: OnLoad="swapPic()" into the <BODY> tag so that your opening tag looks like this:
<body bgcolor="#ffffff" OnLoad="swapPic()">
Your code will look different, of course, depending on the color you've chosen for the background and whether or not you have a background image.
Finally, place the blank image on the page at the location where you want the random image to appear. Then add the name "randimg" to the tag so that you get a line that looks like this in the HTML:
<img name="randimg" src="images/blank.jpg" width=250 height=250>
That's it! Your vistors will now get a random treat each time they visit your page.
