Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 6 ■ Common Uses of JavaScript: Images and Windows
init : function(){},
roll : function( e ){}
}
DOMhelp.addEvent( window, 'load', ro.init, false );
Let’s start fleshing out the skeleton. First up are the properties and the init method. In it, you predefine a
variable called oversrc and store all the images of the document in an array called imgs. You loop through the
images and skip those that don’t have the right CSS class attached to them:
automatedRollover.js (excerpt)
ro = {
rollClass : 'roll',
overSrcAddOn : '_on',
preLoads : [],
init : function() {
var oversrc;
var imgs = document.images;
for( var i = 0; i < imgs.length; i++ ) {
if( !DOMhelp.cssjs('check', imgs[i], ro.rollClass ) ) {
continue;
}
If the image has the right CSS class attached to it, you read its source attribute, replace the full stop in it by the
suffix defined in the overSrcAddOn property followed by a full stop, and store the result in the oversrc variable:
automatedRollover.js (continued)
oversrc = imgs[i].src.toString().replace('. ',ro.overSrcAddOn + '. ');
■ ■Note For example, the first image in the document has the src but_1.gif. The value of oversrc with the suffix
property defined here would be but_1_on.gif.
You then create a new image object and store it as a new item of the preLoads array. Set the src attribute of the
new image to oversrc. Use addEvent() from the DOMhelp library to add an event handler for both mouseover and
mouseout that points to the roll method.
automatedRollover.js (continued)
ro.preLoads[i] = new Image();
ro.preLoads[i].src = oversrc;
DOMhelp.addEvent( imgs[i], 'mouseover', ro.roll, false );
DOMhelp.addEvent( imgs[i], 'mouseout', ro.roll, false );
}
},
154
www.it-ebooks.info