The first step to creating the rollover is to tell JavaScript about the images to be used, this causes the images to load before they are visible. Once the images are loaded into memory image swaps can happen instantaneously. It is possible to have a rollover without declaring and preloading the images, but before the images changes the browser must first open a new connection and load the second image. This takes long enough, even on fast connections, to make the rollover less effective. To preload the images, each is declared in two lines of an array.
Arrays are like mini files, storing several pieces of information all in one place.
The first line initializes the array, and following is a set of numbered for each image. The numbers inside the parentheses refer to the width and height of the image, in that order. All of my example images are in the same folder as the HTML file so they can be addressed with only their name, a non local image would have its full URL in the second line. Early versions of JavaScript were case sensitive. The newest version claims to be partly case sensitive but the boundaries of when it is and isn't are unclear.