Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating More Effective Rollovers
To make the illusion of animation work, you need to make sure that the replacement image appears immediately, with no delay while it is fetched from the server. To do that, you use JavaScript to preload all the images into the browser's cache (so that they are already on the user's hard disk when they are needed) and place the images into script variables.
Then when the user moves the mouse over an image, the script swaps out one variable containing an image for a second variable containing the replacement image. Script 2 (below) shows how it is done. The visible result is the same as in Figures 1 and 2, but the apparent animation is smoother.
){kind=link}
){kind=link}
Script 2 This is a better way to do rollovers than in Script 1, because it won't cause errors in older browsers and the animation is smoother.
-
<HTML>
<HEAD>
<TITLE>A Simple Rollover</TITLE>
<SCRIPT LANGUAGE =JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from older browsers
if (document.images) {
arrowRed = new Image
arrowBlue = new Image
arrowRed.src = "images/redArrow.gif"
arrowBlue.src = "images/blueArrow.gif"
}
else{
arrowRed = " "
arrowBlue = " "
document.arrow = " "
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<A HREF="next.html"
onMouseover="document.arrow.src= arrowRed.src" onMouseout="document.arrow.src= arrowBlue.src"> <IMG
SRC="images/blueArrow.gif"WIDTH=147
HEIGHT=82 BORDER=0 NAME="arrow"></A>
</BODY>
</HTML>