Additional Material on Rollovers and Arrays

The material on this page is optional and is intended for the more advanced student. It will not appear on CS110 exams, but you are welcome to use the ideas and code in your projects. If anything is confusing, please contact us; we'd be happy to help you with it.

Old-Style Rollovers

The code in the notes is the modern way of doing rollovers, and should work correctly in all browsers that handle HTML 4.01. There are still older browsers out there, though, where the IMG tag can't have any event handlers, and only the A (anchor) tag can have event handlers.

If you want to support these older browsers, you can do rollovers in the old way by using the A tag for the event handlers. For example:

take the polar express 

<A HREF="#"
   onMouseOver="oldpic.src='polar-red.png';"
   onMouseOut="oldpic.src='polar-green.png';"><IMG
      ID="oldpic"
      SRC="polar-green.png"
      ALT="take the polar express"></A>

There are few things to notice about this code.

First, we must label the IMG we want to modify because "this" no longer refers to it. (The "this" variable probably refers to the A tag, which doesn't have a SRC attribute.) We're used to that now.

Second, in this particular example, we just wanted the image-swap behavior, but not the hyperlink behavior. That is, we're using the A tag only to support onMouseOver and onMouseOut, but we don't want to link to anyplace. As a substitute, we link to #. You remember the # as the bit of syntax that separates a URL from a fragment from the lecture on imagemaps. Since both the URL and the fragment are missing, a bare # usually means to link to the same place in the same web page. (Actually, some browsers will put you back at the top of the page, which is clearly not what we want.) In short, "#" is a link to "right here."

Unfortunately, that's not quite good enough. Even following a link to "#" ends up adding another entry to the browser history so that the "back" button on the browser doesn't quite do what the user expects. Try it and see! Ideally, we'd like to disable the click event entirely. We can do that by specifying an onClick event handler that returns false. We'll learn later more about what "return false" means. For now, just consider it black magic:

take the polar express 

<A HREF="#"
   onClick="return false"
   onMouseOver="oldpic2.src='polar-red.png';"
   onMouseOut="oldpic2.src='polar-green.png';"><IMG
      ID="oldpic2"
      SRC="polar-green.png"
      ALT="take the polar express"></A>

Try that code, and compare its behavior to the example without "return false."

This old-style rollover code is still commonly used, and it's worth using if you are particularly concerned about supporting very old browsers. However, you are permitted and encouraged to use the simpler, modern code.

Arrays

An array can be thought of as a variable that has numbered slots, like parking spaces in a parking lot. The number of a slot is called its index. The numbered elements are accessed by putting the index (or a variable containing the index) in square brackets after the variable name. Here's an example of using an array to map numbers to filenames for a slide show:

First, we have to initialize the array, storing the elements in their numbered locations: 

<script type="text/JavaScript">
var filenames = new Array();
filenames[0] = 'lions.jpeg';
filenames[1] = 'tigers.jpeg';
filenames[2] = 'bears.jpeg';
</script>

Your mental picture of the preceding code is of a big box labeled "filenames"; this is the variable. Inside that big box is a set of three smaller boxes all glued together, like an egg carton; this is the array. The three smaller boxes are labeled 0, 1 and 2; these are the slots of the array. Inside the three smaller boxes are the strings 'lions.jpeg', 'tigers.jpeg', and 'bears.jpeg'.

Thus, we've stored three strings into the one variable called "filenames," but in numbered slots within the variable.

Later, if we want a particular filename, we use the appropriate number. For example, the following code would cause 'tigers.jpeg' to be displayed in the alert box: 

<script type="text/JavaScript">
alert(filenames[1]);
</script>

However, we don't want to use a fixed index, we want an index that will change depending on where we are in the slide show. In this example, the index will take on the values from 0 to 2. Imagine there's a variable called "slideNumber." Then, the following code will give us one of the elements of the array, as long as slideNumber is 0, 1 or 2: 

filenames[slideNumber]

So, to do the slide show, we start slideNumber off at 0, increase it by 1 whenever the user advances the slide, and when slideNumber exceeds 2, we start it over again at 0.

It turns out that an easy way to start over again at 0 is to use arithmetic mod 3; that is, 0-2 are the remainders when you divide by 3, so we can use a computation based on "% 3": 

<script type="text/JavaScript">
slideNumber = (slideNumber + 1 )%3;
the_slide.src = filenames[slideNumber];
</script>

These two lines of code are deceptively concise. The first line increments the slide number, but uses the "%3" to make sure that the result is always 0, 1 or 2. The second line uses that number as an index into the array called filenames. The filename that was stored in that numbered slot is then made the SRC of the image.

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Wednesday, 17-Oct-2007 23:59:08 EDT