Synchronous Randomization with JavaScript Arrays

The random number methods of Math object have been present in JavaScript for ever and have been put to good use time and time again in all manner of scenarios.  One thing that the random method can easily do is display a random image on, say, your homepage.  It may sound like a small thing but this randomization can be put to incredibly good use with just a little bit of planning and an easy bit of JavaScript.  This one-part article will discuss the use of a multidimensional array and a basic randomization script to create a section of a page that randomly displays a series of images, complete with synchronous roll-overs, links and captions.  This could be a useful addition to any site and provide a visual incentive for visitors to select products from a clearance or special offer section of your online store for example.  Best of all, the code is compact, minimal and entirely client-side so if you don't have full access to server-side script languages on your web-hosts server, you can still implement it.

A lot of people, especially those new to JavaScript coding, shy away from arrays thinking them complex and unnecessary.  For multidimensional arrays that fear is cubed.  But arrays of any kind are the cornerstones of many of the most useful applications of JavaScript, and have featured in one way or another in most of my previous articles.  In addition to a solitary text editor, you'll also need a stock of images to make the resulting page work.  I've included the images that I've used in this tutorial to save you the hassle of finding and formatting images of your own.  Feel free to use them in any context as they are free from copyright or royalty restrictions.