This tutorial is not intended to teach you JavaScript or HTML. Rather it is to show you how to create an ordinary Image Rollover. It assumes you have some knowledge of computers and how to create and browse folders. The HTML in this document is the MINIMUM required to get JavaScript-FX Image Rollovers working. This means it does not conform to any HTML standards. You should consult a book on HTML to determine what the minimum ACCEPTABLE requirements for a HTML document are. The HTML has been kept to a minimum so we can demonstrate what the additional HTML and JavaScript is required to create Image Rollovers.

Lets start with a basic HTML file that has a single image

Open notepad and cut and paste this text into it and save it as index.html in a new folder called c:\testhtml. You should now have the file c:\testhtml\index.html

Next, right click on the following image and choose save as.

Save the image as home.gif, in a new folder under c:\testhtml called images. You should now have a file
c:\testhtml\images\home.gif

Test the file by double clicking on index.html or by using file-open on your WEB browser and then browse your file system until you find c:\testhtml\index.html

It should look something like this :- example 1

We now have our basic file, lets build on it.

First, lets create a normal rollover. To do this we first need an image that will be displayed when the mouse is over the image. Right click on the following image and choose save as.

Save the image as c:\testhtml\images\home_on.gif.

Next we need to add the code to swap the image. This code is placed inside an Anchor TAG <A> and looks like this

This says onMouseOver change the document image named 'home' to 'images/home_on.gif and onMouseOut change the document image named 'home' to 'images/home.gif. For this to work we need to name the image in the document. We do this by giving the image a NAME attribute.

Notice in the text in the previous code example the line; "Anything placed here......". Well if we place our image here then our image will be the link and as the code will execute when the mouse moves over the link (which is the image), we will see the image swap onMouseOver of the image. The complete HTML should look like this.

Cut and paste this into notepad and save as c:\testhtml\index.html.Test it out.

It should look something like this :- example 2

Try and create a second rollover using the following images.


 

Ok, now lets turn this into a JavaScript-FX Image Rollover.

The first thing we are going to have to do is include some JavaScript to create a Rollover Object. We do this by including the JSFX_SimpleRollover.js library. If you have not already done so, download demo.zip, and unzip it. Next, create another folder called javascript and copy the file JSFX_SimpleRollover.js into it. You should now have the file c:\testhtml\javascript\JSFX_SimpleRollover.js.

To include the functions in this file into your document you need the following tag.

Also, it would appreciated it if you would put the following just above the SCRIPT tag.

It is a comment which explains who wrote the library. JavaScript-FX have worked hard on this script and would like to receive some credit for it.

Next we need to write some code to create an Image Rollover Object. We do this by adding the following code into the HEAD of the document.

NOTE: we used the same name as the name given in the <IMG> TAG.

Now we need to change the onMouseOver/Out code to swap the "home" image. We do this by using the functions JSFX.imgOn() and JSFX.imgOff().

Notice how similar this is the the original rollover code.

Again, if we place our image between the anchor tags then the image will control the rollover. Here is what the HTML will look like

Putting it all together, we should have a file that looks like this.

Cut and paste this into notepad and save as c:\testhtml\index.html. Test it out. (Make sure you have put JSFX_SimpleRollover.js in the correct folder)

It should look something like this :- example 3

OK. You may be asking yourself, why include all that stuff in the HEAD section when the original code was much smaller and only required me to edit the onMouseOver and onMouseOut. Well the reason is image pre-loading. If you try using the original code, viewers of your page will notice a delay the first time they rollover your image. They may not even see the rollover effect if they move their mouse fast over your rollover. The JSFX.Rollover will pre-load the on image so there is no delay.

Also, it is easier to define new rollovers. Consider the following.

Here we can clearly see that we have defined 5 rollovers and we can create rollover links in the BODY by adding only a small amount of code to the onMouseOver and onMouseOut attributes.

Etc...