How to Make an Image Rollover

How to Make an Image Rollover

Learning how to make an image rollover from scratch is one of the first techniques any web designer will learn in a basic web design class. Unfortunately, it's a relatively worthless skill, because programs such as Adobe Photoshop, Fireworks, or other web design apps such as Dreamweaver and Frontpage actually make it a matter of just a few mouseclicks to automatically generate as many image rollovers as needed. In the web 2.0 world, even these techniques have been supplanted with other methods that create effects similar to image rollovers using the CSS "hover" property. While programming methods such as Ruby on Rails and AJAX (as well as the everpresent Flash) appear to be slowly replacing JavaScript, it is still a major factor in the operation of many websites. The following technique is both a lesson in how to make an image rollover as well as the proper syntax and conventions of JavaScript.

How to Make an Image Rollover with Javascript

There are two major parts of any JS rollover effect. One is the coded function (usually put in the HEAD section of the document, and the other is the actual call of the function in the part of the BODY that shows the image.

The function should be given a name that is clear to understand for those who read it later - for example, if the rollover is a button, then calling the function "upbutton" in its un-moused-over state and "downbutton" for when the cursor goes over it would be clear.

Before you can use Javascript code, you must define the script language in the HEAD section of your HTML page:

<script language="Javascript" type="text/javascript">

Setting the "If" Condition

The next tag is !-- within carats, which hides the JavaScript from non-JS enabled browsers. Then it is time to set up the function with the images created (designated by the ".gif" files in the code below). Usually web designers will put the images in a sub folder called something like "images", and it is necessary to put the correct path to that file in the function:

if(document.images) {

upbutton= new Image();
upbutton.src="images/homebutton.gif";
downbutton - new Image();
downbutton.src = "images/downbutton.gif";

}

The terms "new," "Image()," and the use of brackets at the beginning and end of the "if" statement are examples of JavaScript Programming conventions.

Designing the Functions

The function itself is a case of taking in a variable (in this case, designated "whichbutton" to enable this code to work on different types of buttons used in website navigation) and then evaluating it into a form that will work in the "If" statement just made:

function downbutton(whichbutton) {

if(document.images){

document[whichbutton].src = eval(whichbutton + "down.src");

}

}

function upbutton(whichbutton) {

if(document.images) {

document[whichbutton].src = eval(whichbutton + "up.src");

}

}

At the end of this function definition, make sure to include the closing //--> and </script>.

Calling the Function in the Body

Once you've included the above code in the header section, it is simply a matter of "calling" the function anywhere on the page where you want an image rollover to occur. This code is very similar to a regular link with A HREF = " ", but it uses two mouse behaviors recognizable by JavaScript:

<a href="index.html" onmouseover="downbutton('homebutton')" onmouseout="upbutton('homebutton')"><img src="images/homebutton.gif" name="homebutton" border="0">

This code sets the image initially to the "up" state of the button - that being the "homebutton.gif" file in the "images/" directory. When the "mouseover" event happens, it calls the function "downbutton", passing it the name "homebutton", which will in turn evaluate it into "homebuttondown.src" and then look in the "images" directory for the "homebuttondown.gif" file to replace the original on the page.

All of this happens in the blink of an eye (especially since most images are pre-loaded). However, the code required for it can tend to get tedious, which is why CSS is now used more often for this type of effect. However, writing functions and calling them from within a document is a common technique for many forms of programming, and learning JavaScript is a good way to hone the skillset of any web designer.

Was this page useful?
How to Make an Image Rollover