<html>
<head>
<title>Rollover Examples Document </title>

<script><!--
var basePath  = "./"  
var activeExt = "-a.gif"
var rollExt   = "-r.gif"

var state     = "loading"      
var rollArray = new Array        
var canRoll   = supportsRoll()   

function loadImages() {
   if (supportsRoll()) {
      for (i=0; i != document.images.length; i++) {
         if (hasName(document.images[i])) {
            var name = document.images[i].name
            rollArray[name] = new Rollovers(name)
         }
      }
      state="loaded"
   }
} 

function hasName(image) {
  if ((image.name == null) || image.name == "") { 
     return(false) 
  } else {
     return(true)
  }
}

function rollInImage() { document.images[this.name].src = this.rollover.src }
function rollOutImage() { document.images[this.name].src = this.active.src }

function Rollovers(name) {       
  this.active = new Image()
  this.rollover = new Image()
  this.active.src = basePath + document.images[name].name + activeExt
  this.rollover.src = basePath + document.images[name].name + rollExt
  this.name = name
  this.rollin = rollInImage
  this.rollout = rollOutImage
}

function imError() { }
function imAbort() { }
function imLoad() { }

function supportsRoll() {
   if (navigator.appName == "Netscape") {
      return (parseInt(navigator.appVersion) > 2)
   }
   if (navigator.appName == "Microsoft Internet Explorer") {
      return (parseInt(navigator.appVersion) > 3)
   }
   return false
}

function wantRoll() {
   if (state == "loaded") {
      return canRoll
   }
   return(false)
}

function myMouseOver(imgName) { 
   if (wantRoll()) { rollArray[imgName].rollin() }
}

function myMouseOut(imgName) {
   if (wantRoll()) { rollArray[imgName].rollout() }
}

//--> </script>
</head>
<body onload="loadImages()">

<h3> Example of Rollover Images </h3>
  <a onMouseOver="myMouseOver('login')" onMouseOut="myMouseOut('login')"
     href="login.txt"><img
        height="21" width="54" border="0" name="login"
        alt="Login as a new user" src="login-a.gif"></a><a
       onMouseOver="myMouseOver('help')" onMouseOut="myMouseOut('help')"
     href="help.txt"><img
        height="21" width="54" border="0" name="help"
        alt="Context-sensitive help"
        src="help-a.gif"</a><a 
     onMouseOver="myMouseOver('home')" onMouseOut="myMouseOut('home')"
     href="home.txt"><img
        height="21" width="54" border="0" name="home"
        alt="System home page"
        src="home-a.gif"></a>


</body>
</html>
