Begin by adding the following block of code to your text editor:
deals1 = new Array("images/gcards/gaintek.gif","images/gcards/gfarce.gif", "images/gcards/leadward.gif","images/gcards/matrax.gif", "images/gcards/nvideon.gif")
deals2 = new Array("images/mobos/abyte.gif","images/mobos/dfrock.gif", "images/mobos/epoch.gif","images/mobos/gigasus.gif", "images/mobos/saltech.gif")
deals3 = new Array("images/hdds/datastore.gif","images/hdds/maxgate.gif", "images/hdds/sambell.gif","images/hdds/toshachi.gif", "images/hdds/wmax.gif")
deals4 = new Array("images/cpus/amg.gif", "images/cpus/amg32.gif","images/cpus/amg65.gif", "images/cpus/nuetrino.gif","images/cpus/outel.gif")
deals5 = new Array("images/ram/corstan.gif","images/ram/critical.gif", "images/ram/generic.gif","images/ram/kingmos.gif", "images/ram/twinsung.gif")
As you can see, there are five arrays, each containing the initial pictures that represent each of the special offers in each of the product lines. Each array is initialized in the format nameof array = new Array with the items in the array comma delimited and contained within brackets and quotes. Each of these statements must be on a single line in the .js file.
In order to make a different picture from each of the product lines display each time the page is loaded, we need to make use of the length property of the array objects by creating an image counter:
This creates a function called randomize that gets called when the page referencing the script loads. It first checks that the browser understands images using the if statement, and provided it does, creates five variables, each containing a random number that is generated using the ((Math.random() * imgCT1)) syntax. The .random property of the math object generates a number between nothing and one, which we then multiply by the relevant imgCT value. The .floor property ensues that the value obtained using the random number is a whole number by rounding the value down to the next whole number. So, if the random number generated is 0.3, you multiply this by 5 (the value of imgCT1) and the random number will be 1.5. We can’t access the index 1.5 from our array because it doesn’t exist, so the floor method rounds this down to 1. The function then sets the src element of the image holder onto the Web page (which we’ll come to in a minute) called deal1 with one of the array indices.