JavaScript Application Cookbook

images.js

Practical use

Image rollovers

Version requirement

JavaScript 1.1

Functions

imagePreLoad(), imageSwap(), display()

Just like the functions in dhtml.js, the code in images.js was presented in earlier chapters. Chapters 3, 4, and 5 have various versions of the code listed in Example 6.7. You can preload images and use them for mouse rollovers.

Example 6-7. images.js

     1  var imgPath   = 'images/';
     2  var arrayHandles = new Array('out', 'over');
     3  
     4  for (var i = 0; i < arrayHandles.length; i++) {
     5    eval('var ' + arrayHandles[i] + ' = new Array()');
     6    }
     7  
     8  for (var i = 0; i < imgNames.length; i++) {
     9    imagePreLoad(imgNames[i], i);
    10    }
    11  
    12  function imagePreLoad(imgName, idx) {
    13    for(var j = 0; j < arrayHandles.length; j++) {
    14      eval(arrayHandles[j] + "[" + idx + "] = new Image()");
    15      eval(arrayHandles[j] + "[" + idx + "].src = '" + imgPath + imgName + 
    16        arrayHandles[j] + ".gif'");
    17      }
    18    }
    19  
    20  function imageSwap(imagePrefix, imageIndex, arrayIdx) {
    21    document[imagePrefix].src = eval(arrayHandles[arrayIdx] + "[" + 
    22      imageIndex + "].src");
    23    }
    24  function display(stuff) { window.status = stuff; }

Since you know the procedure for image rollovers, I haven’t included any graphics here to illustrate the difference.