// Bill Weinman's Common JavaScript Rollover Engine // As described in "Creative HTML Design", by Lynda and Bill Weinman // (c) 1997 Bill Weinman // // You are free to use this script, and modify it to // your heart's content. You must leave this entire header // --including this notice--intact, and make sure there // is a reference to our web site: . // // Version 1.0. First release with Creative HTML Design // // Requires the following variables to be defined in the HTML document: // // okay = false This prevents the script from running prematurely // rtype "highlighting", "pointing", or "slideshow" // imagenames array All the base imagenames // suffixes imagename suffix Used for highlighting rollovers // path path to images (must end in "/") // ext filename extension for images (e.g., ".gif") // // Initialization Instructions: // ---------------------------- // Initialization is different for each of the various types of rollovers. // // "highlighting" type rollovers: // // These are the most common types of rollovers. As your mouse // passes over each image, that image is replace by a "highlighted" // version. // // The "imagenames" array is used for two purposes: each name in the // array must also match the NAME attribute for the corresponding // IMG tag. The "suffixes" array is used to complete the filename // for each image: the first value is added for onMouseOver events, // and the second is added for onMouseOut events. // // "pointing" type rollovers: // // As your mouse passes over each link, an image points at that // link. // // The "imagenames" array uses just one image name, for the // "pointing" image. // // "slideshow" type rollovers: // // As your mouse passes over each link, an image changes in one // location, like a slideshow. // // The "imagenames" array is used for the names of all the images. // function roll_init() { // get the variables var_init(); // this calls the function from the web page // find out what browser this is with(navigator) { code = appCodeName; app = appName; version = appVersion; iver = parseInt(version); ua = userAgent; } // these are from the web page too. son = suffixes[0]; soff = suffixes[1]; // ua string is a generalized printable string uastring = app + " " + iver; // this will work in "Mozilla" 3+ (includes MSIE 4) if ( code == "Mozilla" && iver >= 3 ) okay = true; else okay = false; // this uses eval to create variables // ... and to pre-load the images. for (var i = 0; i < imgS.length; i++) { var name = imgS[i]; var ion = "r" + name + "on"; var ioff = "r" + name + "off"; eval(ion + " = new Image()"); eval(ion + ".src = '" + path + name + son + ext + "'"); eval(ioff + " = new Image()"); eval(ioff + ".src = '" + path + name + soff + ext + "'"); } blank = new Image(); for (var i = 0; i < imagenames.length; i++) { var name = imagenames[i]; eval("r" + name + " = new Image()"); eval("r" + name + ".src = '" + path + name + ext + "'"); } } // the onMouseOver entry point function over(imgname,img) { if (!okay) return true; // just leave unless okay // swap in the "on" image eval("document." + img + ".src = r" + img + "on.src"); blank.src = document.rollover.src; eval("document.rollover.src = r" + imgname + ".src"); } return true; } // the onMouseOut entry point function out(imgname) { if (!okay) return true; // just leave unless okay // swap in the "off" image if (rtype == "highlighting") eval("document." + imgname + ".src = r" + imgname + "off.src"); if (rtype == "pointing") eval("document." + imgname + ".src = blank.src"); if (rtype == "slideshow") { document.rollover.src = blank.src; } return true; }