Image RollOver Example Code

// Define the status line messages which we will be using
// NOTE: ie, displayStatus - the prefix display
// is the same prefix as some of the Image Objects name created below
// and also as an Image prefix name
var displayStatus = "Click here for more information about our Fine Displays";
var birdcageStatus = "Click here for more information about our Birdcage Accessories";
var plasticStatus = "Click here for more information about Custom Plastic Fabrication";

// Define & Preload our Images
// we are also making sure that there will be no browser compatibility issues

if (document.images) {
var displayOn = new Image();
displayOn.src = "images/displayOn.gif";

var displayOff = new Image();
displayOff.src = "images/displayOff.gif";

var birdcageOn = new Image();
birdcageOn.src = "images/birdcageOn.gif";

var birdcageOff = new Image();
birdcageOff.src = "images/birdcageOff.gif";

var plasticOn = new Image();
plasticOn.src = "images/plasticOn.gif";

var plasticOff = new Image();
plasticOff.src = "images/plasticOff.gif";
}

// this function will make sure that there will be no browser compatibility issues
// swap out the "Off" image with an "On" image
// return status => which then gets displayed through the "return true;"
// from where the function was called
function imgOn(imgName) {
     if (document.images) {
          // eval() takes a string & converts it to an Image Object that was defined above
          // without eval(), the result would be a string that not be an "Image Object"
          document[imgName].src = eval(imgName + "On").src;
          // OR document[imgName].src = "images/" + imgName + "On.gif";
     }
     // eval() takes a string & converts it to a Variable that was defined above
     // without eval(), the result would be a string, ie.- just displayStatus,
     // and not the string variable displayStatus that we want -
     status = eval(imgName + "Status");
}

// this function will make sure that there will be no browser compatibility issues
// swap out the "On" image with an "Off" image
// status "clears out" the Status Line
function imgOff(imgName) {
     if (document.images) {
          document[imgName].src = eval(imgName + "Off").src;
          // OR document[imgName].src = "images/" + imgName + "Off.gif";
     }
     status = "";
}

</SCRIPT>

<BODY>

onMouseOver calls the imgOn('display') function which causes 2 things to happen
1) swaps out the "Off" image with the "On" image & 2) displays a Status Line Message
onMouseOut calls the imgOff('display') function which causes 2 things to happen
1) swaps out the "On" image with the "Off" image & 2) "clears out" the Status Line Message

onMouseOver Example Code