   <!--
  /* This script preloads all the images on the page, so that when you roll your 
     mouse over a menu image that is programmed to switch out the image when you 
     do so, you see the alternate image immediately, without having to wait for 
     it to download. 
     
     I got the original script from JavaScript Kit (www.javascriptkit.com) and 
     just changed the function and variable names to make it mine.  I started 
     learning JavaScript with this assignment, so even renaming stuff was a 
     bit of a challenge that helped me learn what did what to what in the code. */
       
  var myPics = new Array()
    
  function getPics() {
     for (i = 0; i < getPics.arguments.length; i++) {
        myPics[i] = new Image();
        myPics[i].src = getPics.arguments[i];
     }
  }
  
  getPics("img/header.jpg","img/nav.jpg","img/content.jpg","img/dx.png","img/about_on.jpg","images/bio_off.jpg","img/bio_on.jpg","img/interests_off.jpg","img/interests_on.jpg","img/class_off.jpg","img/class_on.jpg","img/plans_off.jpg","img/plans_on.jpg","img/links_off.jpg","img/links_on.jpg","img/hi_off.jpg","images/hi_on.jpg","img/face_off.jpg","img/face_on.jpg","img/wave.jpg","img/babyG.jpg","img/bio_bg.jpg", "img/interests_bg.jpg", "img/class_bg.jpg", "img/plans_bg.jpg", "img/links_bg.jpg");
  
  /* Netscape 4 has a bug that messes up the page when the browser is resized.  
     The following function is supposed to compensate for that bug. I haven't 
     tested it. */
          
  var origWidth, origHeight;
    
  if (document.layers) {
     origWidth = window.innerWidth;
     origHeight = window.innerHeight;
     window.onresize = function() {
        if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0);
     }
  }
  
  /* This script shows and hides content on the page.  As you can see, I have 
     put the various sections of the content into divs, instead of linking to 
     separate HTML pages. Using a combination of CSS and JavaScript, you can 
     selectively show or hide the divs.  This script ensures that when you click 
     on a menu image, currently visible content layers are hidden, and the 
     target content layer is made visible.
          
     I got the original script from Dynamic Web Coding (www.dyn-web.com), which 
     I then modified.  I changed the variable and function names so that they 
     made more sense to me, but I also added some new functionality to the 
     script. */
     
  var curLyr;
  var imgClick = true;
  
  /* This is the function that actually swaps out the content divs.  It calls 
     two functions in turn. */
       
  function lyrSwap(id) {
     if (curLyr) {
        lyrHide(curLyr);
     }
     lyrShow(id);
     curLyr = id;
  }
  
  /* This is the function that shows the target content layer, whose id is 
     provided as an argument to the function - that thing in parentheses. 
     
     Now, in addition, I added code to change the link image when you click 
     on it.  By tying the image to the div it controls, both page elements 
     can be simultaneously manipulated. */
     
  function lyrShow(id) {
     var lyr = getElemRefs(id);
     var imgObj = getElemRefs(id + 'Img');
     if (lyr && lyr.css) {
        lyr.css.visibility = "visible";
        imgObj.src = "img/" + id + "_on.jpg";      // This is where the image is changed.
        imgClick = true;                               // I'll talk about this one in a bit.
     }
  }
  
  /* This is, hopefully, self-explanatory.  It's the counterpart to the function 
     that shows the target content layer. */
     
  function lyrHide(id) {
     var lyr = getElemRefs(id);
     var imgObj = getElemRefs(id + 'Img');
     if (lyr && lyr.css) {
        lyr.css.visibility = "hidden";
        imgObj.src = "img/" + id + "_off.jpg";     // Image is turned 'off'.
        imgClick = false;                              // I'll talk about this in a bit.
     }
  }
  
  /* This function is what's supposed to make this whole script compatible 
     with most browsers.  Only the latest generation of browsers are making an 
     attempt to adhere to a single set of standards.  Netscape 4 and IE 4-5.5 
     where kind of a mess.  They worked differently in how they referred to 
     elements in the document, so you always had to mess with a whole bunch of 
     different syntax.
     
     That long line, with question marks and colons, is the JavaScript short-
     hand for a conditional statement.  The stuff in parentheses basically says 
     'If this stuff is true.' The question mark translates to 'then.' What 
     follows the question mark is what's supposed to be executed if the condition 
     is true, and what follows the colon is what's supposed to be executed if 
     the condition is false. 
     
     Hopefully, in the not-too-distant future, the older browsers will go away 
     completely or end up the negligible minority, and all we'll have to use is 
     the first part - the getElementById method of doing things.  More info on 
     that can be found at www.getelementbyid.com. */
     
  function getElemRefs(id) {
     var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? getLyrRef(id,document): null;
     if (el) el.css = (el.style)? el.style: el;
     return el;
  }
  
  /* Now this function here is all for Netscape 4.x, because Netscape 4.x is a 
     colossal pain, the bane of a coder's existence.  It was extremely popular 
     in its time because IE was even worse, and now that it's obsolete, it's 
     proving difficult to get rid of it.  Anyway, Netscape 4.x uses layers.  Not 
     divs, but layers that are actually called layers, and so the code has to 
     be modified so that Netscape 4.x can understand it. Like all my other 
     supposedly backwards-compatible stuff, I'm hoping it works, but I won't be 
     heartbroken if it doesn't. */
     
  function getLyrRef(lyr,doc) {
     if (document.layers) {
        var theLyr;
        for (var i=0; i<doc.layers.length; i++) {
           theLyr = doc.layers[i];
           if (theLyr.name == lyr) return theLyr;
           else if (theLyr.document.layers.length > 0)
           if ((theLyr = getLyrRef(lyr,theLyr.document)) != null) return theLyr;
        }
        return null;
     }
  }
  
  /* This is, true to its name, the rollover function.  I wanted you to be able 
     to roll your mouse over one of the menu items, and have the image change.  
     However, I also wanted that changed image to 'stick' when you clicked on 
     the menu item. Given that half of a rollover script tells the image to 
     change BACK to the original once you move your mouse off it, accomplishing 
     this proved to be tremendously difficult.  I tried about a bazillion 
     different things, eventually resorting to first making up syntax just so 
     I could laugh at it, then slamming my head on my desk.
     
     A few weeks, a few bruises, and a LOT of Excedrin later, I finally got 
     something to work.  I got the original rollover script from Chris Poole 
     (chrispoole.com), and then painstakingly reworked it.  Okay, so I only 
     added a coupla lines and a conditional expression, but given that I have 
     no clue what I'm doing, it was painstaking work, ok? Yeesh.
     
     Here's where it gets interesting.  This function makes use of the global
     variable imgClick I defined way back in the beginning.  The concept behind 
     all of this is that a regular rollover did nothing but override my code 
     telling the image to 'stick,' so what I had to do was use a variable to 
     keep track of whether or not the image has been clicked.  If it's been 
     clicked, the rollover won't work on it, but it'll work on all the others. */
     
  function rollover() {
     if(!document.getElementById) return
     var imgOrig;
     var imgTemp = new Array();
     var imgArr = document.getElementsByTagName('img');
     for (var i = 0; i < imgArr.length; i++) {
        if (imgArr[i].getAttribute('hsrc')) {
           imgTemp[i] = new Image();
           imgTemp[i].src = imgArr[i].getAttribute('hsrc');
           imgArr[i].onmouseover = function() {
              imgOrig = this.getAttribute('src');
              this.setAttribute('src',this.getAttribute('hsrc'))
              imgClick = false;
           }
           imgArr[i].onmouseout = function() {
              if (!imgClick) {
                 this.setAttribute('src',imgOrig);
                 imgClick = true;
              }
           }
        }
     }
  }
  //-->