Disjointed Rollovers

This work is licensed under a Creative Commons License.

Disjointed Rollovers

By: Bill Horvath

It happens to all of us at some point: You've gotten bored with plain old rollovers on your nifty menu, you want to add a little something, maybe rolling over one of your buttons and having it trigger another image swap elsewhere on your page. In this tutorial, we'll go over how to do that, and even how to make a picture appear where there wasn't one before, all using the Swap Image behavior.

We get a lot of questions about how to go about doing this. Let's start learning!

The Menu

For this tutorial, I'm going to use a menu that looks like this:

What we want to have happen is when you roll over Button 1, you will not only change the appearance of Button 1, but you will also change Image A (that circle on the right side). When the mouse rolls off of Button 1, the button will change back to it's normal state (shown above), and Image A will also change back to it's normal state. The same will happen with Button 2 and Button 3. Each button will change Image A to a different image. This animated gif should give you an idea of what we're after:

Naming your Images

One of the greatest favors you can do for yourself before creating your rollovers is to name your images in Dreamweaver. This is done by going to to the Properties Inspector and giving it a name, as shown below:

Do that for each image on your page (giving each a distinct name) that is involved in the rollover process, including Image A.

Rollover Sizes

Another very important step before actually applying the rollover is to make sure that each rollover image is the same size as the image it will be swapping with. You may have noticed in the animated sample that Image A is swapping out with images that appear larger than itself. That is not the case. The actual size of Image A is actually 129 pixels by 126 pixels, as shown below. Those are the exact dimensions as the larger circle, the square and the polygon we're swapping the smaller circle with (see animated gif above).

OK, now we have our images named, and each image is the same size as the image it will be swapped for. On to the good stuff!

Making the First Swap Image

Let's start with Button 1. Select it, and go to your Behavior panel. Choose the Swap Image behavior. Your Button 1 should be selected by default in the 'Images' field at the top of the behavior window, but if it's not, select it now. Use the 'Browse' button to find the rollover version of Button 1. See the illustration below.

Once you've chosen the image, select the image representing Image A, which in this case is called 'biganchor'. Select the image you want to swap with Image A by clicking the 'Browse' button. See illustration below:

Notice that each image that is being swapped has an asterisk next to it in the Swap Image behavior panel. This will help you keep track of which images you've applied the behavior to.

Once you're finished with the Button 1 swaps, click the 'OK' button in the Swap Image behavior panel.

Now you'll want to apply the above steps to Button 2, and then Button 3.

Once you're finished, you should have the same effect going on as shown in the animated gif shown on page one.

Handy little trick: In place of Image A, you could place a transparent gif, or a gif that matches the background of your page. You could then apply a Swap Image behavior to Button 1 and the transparent gif so that a new image appears where there was only a blank space before. Kind of neat if you really want to make the disjoint rollover catch someone's eye.

Summary

That in a nutshell are the basics of applying a disjointed rollover. As painful as the word 'disjointed' sounds, it wasn't all that bad, eh?

You can download the png file for the menu and the html page that holds the buttons by clicking on the disk below.

Top