Javascript Rollovers made easy

Vikki Dawson 1 There are many, many ways to create javascript rollovers. Some software available today will create them for you. There are also lots of free scripts all over the internet for creating javascript rollovers. This tutorial will cover one way of creating javascript rollovers with a simple one line script and a preload script to preload the over images so the rollovers work smoothly. First you need to create two images. You need a "normal" state image and an "over" state image. Below are the two I'll use for this tutorial. The first image (the blue one) is for the normal state. The second is for the over state.      2 The script for the rollover is below.  <a href="#" OnMouseOver = "if (document.images) document.example.src='over.gif';" OnMouseOut = "if (document.images) document.example.src='normal.gif';"> <img border="0" src="normal.gif" width="100" height="70" name="example"> </a>   3 The rollover in action is below. Run your mouse over it to see it change. 4 In the script above the image has a name. I've named it example. Whenever you are creating a rollover you must name the image so the javascript has something reference and knows what image you want to do something with. So, if you read the above script you'll see: <img border="0" src="normal.gif" width="100" height="70" name="example"> "if (document.images) document.example.src='normal.gif' The image is named and the script references the image name.   5 Now for small image files it's probably not necessary to use a preload script. However, I do make a practice of it because every browser is different and behaves differently when it encounters javascript. A preload script loads the "over" images into the browser cache so the browser doesn't have to request the "over" images from the server every time you mouse over them.   6 Below is the preload script for the example rollover above. <SCRIPT LANGUAGE="Javascript"> <!-- vydImageSrc = new Array ( "overv.gif" ) vydImageList = new Array (); for (counter in vydImageSrc) { vydImageList[counter] = new Image(); vydImageList[counter].src = vydImageSrc[counter]; } // --> </SCRIPT> The above is placed in the head section of your html document as shown below. 7 You'll notice in the script where it says over.gif. If you have more than one image on a page that you will be creating mouseovers for you can add them there separated by a comma. They must always be enclosed in quotes. vydImageSrc = new Array ( "over.gif", "over2.gif", "over3.gif" ) You can name the images whatever you want.   8 It's all pretty simple once you get the hang of it. I keep a notepad file with the preload and rollover script so I don't have to remember the script. Go ahead and try your own. One tip before I go. You should always try to keep your "normal" and "over" state images the same size so the browser page doesn't jump around when loading and unloading them. Have fun!   Copyright 2003, Vikki Olds, All Rights Reserved