//	 Created by William Bontrager of http://willmaster.com/
//    Copyright 1999 by William Bontrager. All rights reserved.
//
//    You may modify this code, according to the instructions contained
//        within, and use it for legal and ethical purposes on your own
//        websites.
//
//
// Simple Mouseovers -- FOUR STEPS
//
// Do only the steps indicated. Leave everything else as it is.
//
//  Definitions:
//
//  mouseover image -- the image that is visible when the browser
//                     first loads, and that will be replaced if
//                     the mouse travels over the top.
//
//  replacement image -- the image which replaces the mouseover
//                       image when the mouse travels over the top.
//
// NOTE: --))) The image size of both the mouseover image and the
//             replacement image must be the same. The file sizes
//             may be different. The file extension may be different.
//             But the image size must be the same.
//
//             Okay, it will work even if the image sizes are different.
//             But one of the following will happen:
//
//              (i) If you use height= and width= size attributes in your
//                  <img... tag, then the replacement image will be squeezed
//                  or stretched to fit into the mouseover image size.
//
//             (ii) If you do not use size attributes in your <img... tag,
//                  the replacement image might squeeze or stretch; but it
//                  is more likely to fill a different screen area than the
//                  mouseover image did. Filling a different screen area could
//                  make your page look cluttered and confusing.



// STEP (1)
//      Create your page the way you want it to look when it first
//           loads. Those images intended for mouseovers must be
//           links (within the anchor tag set). Example:
//       <a href="otherpage.html"><IMG SRC="image.gif" border="0"></a>
//
//      Once your page is created, paste this JavaScript (the entire
//           block of code that you are reading, about 200 lines) immediately above
//           the <LINK REL="stylesheet" TYPE="text/css" HREF="../possibilites.css">
//           </head> tag of your page.



// STEP (2)
//      Count the number of mouseover images you have on your page and
//      type the total count on the following line:

var number_of_mouseover_images = 12;



browser = new Image();                                 // leave this line as is
if(! browser) browser = false;                         // leave this line as is
else browser = true;                                   // leave this line as is
function MakeStringArray(n){                           // leave this line as is
this.length = n;                                       // leave this line as is
for (var i = 1; i<=n; i++) { this[i] = new String(); } // leave this line as is
return this;                                           // leave this line as is
}                                                      // leave this line as is
if(browser == true){                                   // leave this line as is
var n = number_of_mouseover_images + 1;                // leave this line as is
position = new MakeStringArray(n);                     // leave this line as is
original = new MakeStringArray(n);                     // leave this line as is
over_lay = new MakeStringArray(n);                     // leave this line as is
}                                                      // leave this line as is



// STEP (3)
//      The code below consists of sets. There is one set for each mouseover image.
//      Each set has a position[#] = ___, an original[#] = ___, and an
//                over_lay[#] = ___ line.
//      All three lines of each set have the same number in the brackets. The
//                first set is [1], the second set is [2], and so forth, until
//                you have as many sets as you have number_of_mouseover_images
//                which you specified in step (2).
//
//      To determine the number for the position[#] = ___ value, do a
//                sequential count of each <IMG... tag on your page
//                until you get to the applicable mouseover image.
//                The number of the image is the number value for
//                position[#] = ___
//      The original[#] = ___ value is the original image's SRC. It is the
//                same  SRC="___" as the mouseover image already on your page.
//      The over_lay[#] = ___ value is the SRC of the replacement image you
//                want to show when the mouse cursor is over the original
//                (the SRC you would use if you were to code it into your
//                HTML page for display).

position[1] = "5";
original[1] = "http://cstm.asu.edu/images/capstone/image1.jpg";
over_lay[1] = "http://cstm.asu.edu/images/capstone/image1r.jpg";

position[2] = "6";
original[2] = "http://cstm.asu.edu/images/capstone/image2.jpg";
over_lay[2] = "http://cstm.asu.edu/images/capstone/image2r.jpg";

position[3] = "7";
original[3] = "http://cstm.asu.edu/images/capstone/image3.jpg";
over_lay[3] = "http://cstm.asu.edu/images/capstone/image3r.jpg";

position[4] = "8";
original[4] = "http://cstm.asu.edu/images/capstone/image4.jpg";
over_lay[4] = "http://cstm.asu.edu/images/capstone/image4r.jpg";

position[5] = "9";
original[5] = "http://cstm.asu.edu/images/capstone/image5.jpg";
over_lay[5] = "http://cstm.asu.edu/images/capstone/image5r.jpg";

position[6] = "10";
original[6] = "http://cstm.asu.edu/images/capstone/image6.jpg";
over_lay[6] = "http://cstm.asu.edu/images/capstone/image6r.jpg";

position[7] = "11";
original[7] = "http://cstm.asu.edu/images/capstone/image7.jpg";
over_lay[7] = "http://cstm.asu.edu/images/capstone/image7r.jpg";

position[8] = "12";
original[8] = "http://cstm.asu.edu/images/capstone/image8.jpg";
over_lay[8] = "http://cstm.asu.edu/images/capstone/image8r.jpg";

position[9] = "13";
original[9] = "http://cstm.asu.edu/images/capstone/image9.jpg";
over_lay[9] = "http://cstm.asu.edu/images/capstone/image9r.jpg";

position[10] = "14";
original[10] = "http://cstm.asu.edu/images/capstone/image10.jpg";
over_lay[10] = "http://cstm.asu.edu/images/capstone/image10r.jpg";

position[11] = "15";
original[11] = "http://cstm.asu.edu/images/capstone/dan.jpg";
over_lay[11] = "http://cstm.asu.edu/images/capstone/danr.jpg";

position[12] = "16";
original[12] = "http://cstm.asu.edu/images/capstone/ladee.jpg";
over_lay[12] = "http://cstm.asu.edu/images/capstone/ladeer.jpg";


// STEP (4)
//      This step modifies the webpage you already made, the
//           section below the <body... tag with the images
//           you are specifying as mouseovers.
//      Each of your mouseover images are links (within the
//           anchor tag set).
//      This step requires modifying the anchor tag. It looks
//           something like this example:
//
//                <a href="otherpage.html">
//
//      Two tag attributes must be inserted within that anchor
//           tag, one for when the mouse travels over the image
//           and one for when the mouse leaves the image:
//
//                onmouseover="m_over(#); return true"
//                onmouseout="m_out(#); return true"
//
//      Replace the "#" character between both parenthesis
//           pairs with the set number relating to your
//           image in STEP (3). If it is your first image set,
//           replace the # with the digit 1. If it is your second
//           image set, replace it with 2. And so forth. (There
//           should be as many image sets as the number of
//           mouseover images you specified in STEP (2).)
//
//      The modified anchor tag will look something like this:
//
//                <a href="otherpage.html"
//                onmouseover="m_over(1); return true"
//                onmouseout="m_out(1); return true">
//
//      Insert the above attributes, with correct numbers between
//          the parenthesis, within the anchor tag of each mouseover
//          image.
//
//
// DEBUGGING:
//
//      Do not change anything on the lines which end with: // leave this line as is
//
//      Each line that you change must end with a semi-colon ";"
//
//      JavaScript error: "graphics[...] has no properties"
//      or
//      JavaScript error: "graphics[...].src is not an object"
//      (or something similar with "graphics[...]")
//           Correct the value of number_of_mouseover_images in STEP (2).
//
//      Nothing happens when the mouse moves on the image:
//           Correct the value of over_lay[#] in STEP (3). Check spelling.
//
//      Nothing happens when the mouse moves off the image:
//           Correct the value of original[#] in STEP (3). Check spelling.
//
//      The mouseover picture shows up only when the mouse moves OFF the image:
//           Reverse the values of original[#] and over_lay[#] in STEP (3).
//
//      The mouseover picture shows up, but in the wrong place:
//           Correct the value of picture[#] in STEP (3).
//
//      Nothing at all happens (check all of the following):
//           STEP 4 may not have been done correctly.
//           Some or all of the of the picture[#] values in STEP (3) may be incorrect.
//           Some or all of the of original[#] and/or over_lay[#] values in STEP (3)
//                may be misspelled or reversed.
//           The number_of_mouseover_images value in STEP (2) may incorrect.



// Leave all the rest of the JavaScript code as is.



function MakeArray(n){                                          // leave this line as is
this.length = n;                                                // leave this line as is
for (var i = 1; i<=n; i++) { this[i] = new Image(); }           // leave this line as is
return this;                                                    // leave this line as is
}                                                               // leave this line as is
if(browser == true){                                            // leave this line as is
var n = ((number_of_mouseover_images + 1) * 2);                 // leave this line as is
graphics = new MakeArray(n);                                    // leave this line as is
n = number_of_mouseover_images + 1;                             // leave this line as is
var i = 1;                                                      // leave this line as is
var j = 0;                                                      // leave this line as is
for(i = 1; i <= n; i ++) {                                      // leave this line as is
j++;                                                            // leave this line as is
graphics[j].src = original[i];                                  // leave this line as is
j++;                                                            // leave this line as is
graphics[j].src = over_lay[i];                                  // leave this line as is
}                                                               // leave this line as is
}                                                               // leave this line as is
function m_over(n){                                             // leave this line as is
if(browser == true){                                            // leave this line as is
document.images[(position[n]-1)].src = graphics[(n*2)].src;     // leave this line as is
}                                                               // leave this line as is
}                                                               // leave this line as is
function m_out(n){                                              // leave this line as is
if(browser == true){                                            // leave this line as is
document.images[(position[n]-1)].src = graphics[((n*2)-1)].src; // leave this line as is
}                                                               // leave this line as is
}                                                               // leave this line as is