NWE Help: Graphics: Tips: Rollovers

To see this trick in action, check out our sample rollover page.

About Rollovers

Web pages have become increasingly interactive over the past few years, and the most popular type of interactive graphics is the rollover. Menus that expand or buttons that appear to move up and down when the cursor moves over them are examples of rollovers, which usually are created using a code called JavaScript.

If you view the page source information for our sample rollover page, you will notice a bunch of code in the document's header. That Javascript code contains instructions for the rollover. Here's how it works: Your computer silently keeps track when you move your mouse or press a button, and JavaScript draws on the computer's knowledge about these and other "events" to make Web sites respond to a user's actions. A rollover script assigns certain actions, such as one image being replaced by another, to particular events.

Things to Consider

Writing the JavaScript code to produce a simple rollover is fairly easy, and you can produce some interesting effects, but there are a few things you should consider before you decide to put a rollover on your Web page:

Not all Web browsers understand JavaScript. In most cases, these browsers will simply ignore the code and display the page without the rollover effect, but some browsers might run into trouble displaying your page.
Rollovers add extra images and, therefore, extra bandwidth requirements to your page. Your pages will take longer to download, and people with slower modems may become frustrated and give up.
Scripts can break. If a semi-colon or quotation mark gets erased inadvertently your page may not display properly.

Before you tackle a rollover, you need to have a good understanding of how the image and hyperlink tags work in HTML. If you feel you aren't yet familiar enough with the subject, take some time to study the basics before continuing with this tutorial.

Making a Rollover

When creating a rollover, the first thing you need to do is select two images: one that will appear initially and one that will replace the first image when the cursor passes over it. For our sample page, we chose two simple images of equal size: roll.gif and over.gif.


roll.gif	over.gif

To make over.gif replace roll.gif when the cursor passes over it, we wrote some JavaScript code in the header section of our HTML document and we added a special hyperlink tag around the image in the body of the document. Here's the code:



<script language="JavaScript">


<!-- Hide from browsers that don't understand JavaScript
        
        
        if (document.images) {
        

                Image1 = new Image (100,100);
                Image1.src="roll.gif";

                Image2 = new Image (100,100);
                Image2.src="over.gif";

        }

        function swapImage() {
          if (document.images) {
            for (var i=0; i<swapImage.arguments.length; i+=2) {
                document[swapImage.arguments[i]].src = eval
                (swapImage.arguments[i+1] + ".src");
            }
          }
        }
        
// --> 

  

</script>

Write the javascript

The first thing we did was put HTML comment delimiters around the whole script to "hide" the code from Web browsers that don't understand JavaScript.
Next, we wrote a brief conditional statement, if (document.images), that, translated into English, would say somthing like,"If this Web browser understands the JavaScript Image code, run this script," followed by the file location, dimensions, and a special name for each image in the rollover.
Finally, we created a function called "swapImage" that will perform the rollover.

Place the image and code
Once we finished our script we were ready to place roll.gif on the page with some instructions for substituting over.gif when the mouse passes over.

We used a regular image tag for roll.gif, but we included a NAME attribute that associates the image with the name "Rollover."
Next, we made the image a link using a regular hyperlink tag.

For a rollover to perform its magic, the image must be part of a hyperlink, even if you don't want to link the image to anything (we made the link inactive by designating a pound (#) sign as the address).



<a href="#" onMouseOver="swapImage('Rollover', 'Image2');
return true;"  onMouseOut="swapImage('Rollover', 'Image1'); return
true;"><img name="Rollover" src="roll.gif" border="0"></a>

After the address, we added code to handle two events: onMouseOver and onMouseOut. The first bit of code tells the browser to replace the current image called "Rollover" with "Image 2" when the cursor passes over the image. The second bit of code tells the browser to return "Image 1" to its original position when the cursor moves away from the image.

You can easily adapt the code from our sample page to create your own simple rollovers. Just copy the code onto your web page and substitute the names of your own images for the ones we used in our example.

More Rollover resources

You also can find some very good tutorials and help pages online. Here are a few of our favorites:

Joe Maller's guide to JavaScript rollovers provides an excellent, easy-to-understand narrative of how rollovers work.

Some of the newer image software, such as Adobe Photoshop and Macromedia Fireworks, have rollover features that write JavaScript code automatically. These features are user friendly and fairly convenient, but it's a good idea to understand some JavaScript rollover basics before you use them. If you're not careful, you can inadvertently create a rollover effect when making changes to an image, and if you don't understand JavaScript you might find it difficult to correct the problem without starting over from scratch.

While rollovers made with Adobe or Macromedia software work on Web pages in the NWE, the NWE doesn't offer any technical support for these programs. In other words, if your rollovers break, you're on your own.