TIP 184: Randomizing Images

If a picture is worth a thousand words, what are three pictures worth? Six pictures? Instead of forcing yourself to pick that one perfect image for a Web page, you can pick from several images and let GoLive randomize the display every time a visitor loads the page. It's easy to set up with JavaScript Actions when you follow these steps:

1.	Add the base image to the page just like a normal image. If all the images are the same dimensions, leave the dimensions as Pixels in the Inspector. If the images are not the same size, then set the image dimensions to Image in the Inspector.
2.	Select the image in the page and give the image a unique name in the Basic tab of the Inspector. Limit the name to letters and numbers to keep things simple and remember that the Name field can't start with a number (Figure 184a). Figure 184a. Name the image in the Inspector so you can control it with JavaScript Actions.
3.	Drag a Head Action object from the Smart section of the Objects palette into the Head section (see Tip 36) of your Web page and open the Actions palette.
4.	With the Head Action still selected, choose On Load in the Events menu and pick Images > RandomImage in the Action pull-down menu (Figure 184b). Figure 184b. Set the Random Image Action to occur when the page loads so the visitor instantly sees the random image. Six Random Images If three images aren't enough, you can try the free 6 Random Images Action from http://share.studio.adobe.com/axAssetDetailSubmit.asp?aID=3867. Make sure you remove the default Random-Image Action so they don't conflict.
5.	Decide which three images you want to randomize and assign them in the bottom of the Actions palette (Figure 184c). Figure 184c. Assign the random images in the Actions palette.
6.	To see the Random Image effect, preview the page in a Web browser (see Tip 94). Reload the page several times to see the image change.