Image Rollovers

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

<HTML>
    <HEAD>
        <TITLE>Image Rollovers</TITLE>
    </HEAD>
    <BODY>
        <IMG SRC="images/home.gif" BORDER="0" >
    </BODY>
</HTML>

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


<A HREF="index.html"
    onMouseOver="document.images['home'].src='images/home_on.gif'"
    onMouseOut="document.images['home'].src='images/home.gif'">
Anything placed here will be a link to index.html
</A>

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.


<IMG SRC="images/home.gif" BORDER="0" NAME="home">

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.


<HTML>
    <HEAD>
        <TITLE>Image Rollovers</TITLE>
    </HEAD>

    <BODY>
        <A HREF="index.html"
         onMouseOver="document.images['home'].src='images/home_on.gif'"
         onMouseOut="document.images['home'].src='images/home.gif'">
                <IMG SRC="images/home.gif" BORDER="0" NAME="home">
        </A>
    </BODY>
</HTML>
 

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.


<SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_SimpleRollover.js" TYPE="text/javascript">
</SCRIPT>

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


<!-- (* Another free JavaScript from JavaScript-FX.com *) -->

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.


<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
    JSFX.Rollover("home", "images/home_on.gif");
//-->
</SCRIPT>

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().


<A HREF="index.html"
    onMouseOver="JSFX.imgOn('home')"
    onMouseOut="JSFX.imgOff('home')">
Anything placed here will be a link to index.html
</A>

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


    <IMG SRC="images/home.gif" BORDER="0" NAME="home">

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

<HTML>
  <HEAD>
    <TITLE>Image Rollovers</TITLE>
    <!-- (* Another free JavaScript from JavaScript-FX.com *) -->
    <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_SimpleRollover.js"></SCRIPT>
    <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
    <!--
      JSFX.Rollover("home", "images/home_on.gif");
    //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <A HREF="index.html"
      onMouseOver="JSFX.imgOn('home')"
      onMouseOut="JSFX.imgOff('home')">
        <IMG SRC="images/home.gif" BORDER="0" NAME="home">
    </A>
  </BODY>
</HTML>

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.


<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
    JSFX.Rollover("home", "images/home_on.gif");
    JSFX.Rollover("email", "images/email_on.gif");
    JSFX.Rollover("links", "images/links_on.gif");
    JSFX.Rollover("scripts", "images/scripts_on.gif");
    JSFX.Rollover("graphics", "images/graphics_on.gif");
//-->
</SCRIPT>

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.


        <A HREF="links.html"
            onMouseOver="JSFX.imgOn('links')"
            onMouseOut="JSFX.imgOff('links')">
                <IMG SRC="images/links.gif" BORDER="0" NAME="links">
        </A>

        <A HREF="graphics.html"
            onMouseOver="JSFX.imgOn('graphics')"
            onMouseOut="JSFX.imgOff('graphics')">
                <IMG SRC="images/graphics.gif" BORDER="0" NAME="graphics">
        </A>

Etc...