More Rollovers

Now that we have learned how to create a rollover with just an image, let's try another possiblity; cause a rollover with a Hyperlink.

Click HERE to view the results.

Cycling Banner

Now wasn't that fun. Next we will learn how to create a banner using images. In order to do this we need to learn a few more things. First off let's talk about the Internet a little more, specifically commercial web sites. I'm sure you have noticed banners at the top of the pages with multiple advertisements cycling. In most cases these banners are simply created with JavaScript. These banners are usually nothing more than multiple images cycling and pausing for a period of time in between.

Let's do this one the same way we have done the others. We can write the code first, and then I will help to understand what is going on. I will explain to you that in order to do this we will use a new concept to you called Array's. An Array is simply a collection of similar objects that can be accessed by means of a variable name and an index value. Arrays are available in virtually every modern programming language, so it is importantfor you to become familiar with them.

Click HERE to view the Results.

Now let's review what we have accomplished. The first new concept is the Array. We have 4 diffferent images with the same name, and again we are using the new keyword. new is doing the same thing here as it did in the last exercise, it is simply reserving memory for the objects that are about to be assigned. In this case, it is reserving space for 4 objects. The next lines should be familiar to you, and they work the same as they did in the last exercise. The last element after the array has been defined in the variable created to hold the value for the index. The variable will be named index. That's unique isn't it, however it is easily understandable.

Next we created our own function in JavaScript. The function cycle was written to tell the images to display for a couple of seconds, then change to the next incremented image for two seconds, etc. The first line of code should look familiar as well. We are doing the same thing here as we did in the last exercise, we are assigning the image to the banner object on your page.

Next so that we can display the next image object in the Array, we need to increment the index variable in order to display the next element in the array. Usig the ++ will simply add one to the current value of index.

Now we need to check to see if we have reached the last element in the array and start over again with the first one. That is what the if statement is doing. If the index = = 4, there is no imgArray[4], so we need to start over again with 0.

The next new item to review is the builtin function, setTimeout. This function accepts two parameters, the function or criteria to be timed out, and the amount of time to timeout. for each 1000 milliseconds = one second. So 2000 is equal to two seconds. What this all means is that the function cycle is setting the criteria of what will be timed -- the banner. So each image of the banner will display for 2 seconds.

The Body tag has something new as well. the onload JavaScript event has been added to load what is going on in the cycle function as the page is loading. This needs to be done, so that the user does not have to do anything for the images to display. In other words, this is done automatically when the page loads in the browser, and every two seconds the function cycle is called upon to update the image that is being displayed.

Random Images

The exercise we just completed, images were display sequencially. There may be times however, when the owner will want the images to display randomly or in no particular order. This is actually easier in JavaScript than the code to sequentially order your images or objects. All that you need to change is the function cycle. Instead of the cycle function, we will call the function select, because our images will no longer be cycling, the will be randomly selected and displayed. See below;

Now for the explanation. First the JavaScript code to generate a randome number, and then convert that number into a valid array index in the range of 0-3 (our array values). The JavaScript method random( ) (which is part of the math object), is guaranteed to return a real or floating-point number that is greater thatn or equal to 0.0 and less than 1.0. (A real number is a numerical value that includes a decimal portion.) Since numbers in this restricted range are not usable as array indices, we need to scale them to the proper range. in this case we have four elementws in our array, so we multiply 9 with the * operator) the random value by 4. now we have real number that is guaranteed to be greater than or equal to 0.0 and less thatn 4.0. The final step is to invoke the Math.floor( ) method, which will eliminate the decimal part of the resulting number. This means that the only possible values remaining are 0,1,2 and 3, and these are exactly the values we need to use as array indices.