Introduction to Random Images

view movie Click icon to view demonstration

In this demonstration we will be learning how to create a Web page that displays a random image every time it reloads. In this type of page you never know what image will load when someone visits the page. In my example I have 7 images, and each time I load the page I have a 1 in 7 change of displaying a particular image.

the unique feature of this code is that the designer and the visitor have no control over what image displays, unlike the Web gallery or a slideshow.

Another example can be found at the SRJC website http://www.santarosa.edu. The collage that is in the center of the opening scren changes as ou reload. The center of the screen is an extremely valuable piece of "screen real estate" When you have several images and you want them all to be viewed as imortant, the random imge allows them to take turns in the spotlight. Instead of trying to squeeze 5 collages onto the screen we can take turns shoing the 5 collages.

Random images can also add to the visual inerst of the site. If we only have the collage with the graduate and the athletes, after a while we would get tired of this image. Because the images change we hold visitor interest for a longer peirod of time.

Now let's talk about how you create this effect. I create a folder on my Desktop named "random", within that folder is a copy of the folder I used at the gallery "yard-originals". These are very large images which came directly from my digital camera. I am only using the landscapes images since one of the requirements of the random image code is that all images take up exactly the same space on the screen.

As I view information about these images I am reminded that they are much to large to display on the Web. I need to resize them and rename them. The rabdom image script requireds that the files I use folow a naming pattern. I rename each images as "photo1.jpg", "photo2.jpg", etc. so that now all 7 images have matching names.

I also created a folder named "yard-random". I will use a Photoshop action to resize the images and place the smaller photosw into this folder. That's what happens in the next demonstration.

nt Pan Productions | Design by Andreas Viklund of Jokkmokk.