USE EVENTS TO CREATE DYNAMIC PAGES

The first step in creating image rollovers is to create the images you want to use. Figures 6-1 and 6-2 show two simple images that are 100 pixel squares of a solid color. You can save these two images from this Web page (right-click, and then Save Picture As ) or create your own images in your favorite image-editing program.

Figure 6-1 shows the red square.

Figure 6-1: Red square.

Figure 6-2 shows the green square.

Figure 6-2: Green square.

Start by writing the code to preload the images so there won't be any delay to wait for the second image to download when a rollover event occurs.

<script type="text/javascript" language="JavaScript">
<!--
var mySquareOn = new Image();
mySquareOn.src = "green.gif";
var mySquareOff = new Image();
mySquareOff.src = "red.gif";
// -->
</script>

Next, add the <img> tag to the body of the document:

<img name="mySquare" id="mySquare" src="red.gif" 
  width="100" height="100">

Finally, add <a> tags around the <img> tag. Be certain that you have included a name attribute in the <img> tag or this won't work.

<a href="#" onmouseover="document.mySquare.src=mySquareOn.src" 
  onmouseout="document.mySquare.src=mySquareOff.src">

<img name="mySquare" id="mySquare" src="red.gif" 
width="100" height="100" border="0">

</a>

Alternatively, you can call a function from the <a> tag; for example:

<a href="#" onmouseover="rollIt1()"onmouseout="rollIt2()">
<img name="mySquare" id="mySquare" src="red.gif" width="100" 
   height="100" border="0">
</a>

If you use functions for the rollovers, be sure to include the functions in the head section of the page so that the functions are available for use by the time the image displays on the Web page.