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.