<html>
<head>
<script language=javascript>
<!-- Hide from older browsers
if (document.images) { welcon = new Image
welcon.src = welcon.jpg
welcoff = new Image
welcoff.src = welcoff.jpg
}
else { welcon = ""
welcoff = ""
document.welcome = ""
}
// End hiding -->
</script>
</head>
<body><a href="../ausbin/1austin.html" onMouseover="document.welcome.src='welcoff.jpg'" onMouseout="document.welcome.src='welcon.jpg'"> <img src="welcon.jpg" name="welcome" border="0"></A> </body> </html> |
In the "Better MouseOver" example, the <body> portion of the html document is exactly the same as before. A section of JavaScript code has been added to the <head> portion of the document. The purpose of this added code is to load all of the images into the client's cache as the page is intitially loaded. The image are stored as variables to be used later in the page. This way, the images change instantaneously the first time they are passed over by the user's curser.
The JavaScript code in the top portion of the html document sets up a
test condition. If the condition is true, only the first set of
statements is performed; if the condition is false, only the second set of
statements is executed. This is the generic form:
if ( condition ) { javascript statement;
javascript statement;
etc......;
}
else {
javascript statement;
javascript statement;
etc......;
}
The condition being tested in the Mouseover example is:
If the test condition fails, then the user must have an older Brower. In this case, the else portion of the condition should be executed to avoid the occurrence of an error.