// 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: <http://www.htmlbook.com/>. 

//

// 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. 

if (rtype == "highlighting") {

  for (var i = 0; i < imagenames.length; i++) {

    var name = imagenames[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 + "'");

    }

  }

if (rtype == "pointing") {

  blank = new Image();

  on  = new Image();

  on.src  = path + imagenames[0] + ext;

  }

if (rtype == "slideshow") {

  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)

{

if (!okay) return true; // just leave unless okay



// swap in the "on" image

if (rtype == "highlighting")

  eval("document." + imgname + ".src = r" + imgname + "on.src");

if (rtype == "pointing") {

  eval("blank.src = document." + imgname + ".src");

  eval("document." + imgname + ".src = on.src");

  }

if (rtype == "slideshow") {

  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;

}