Rollovers are Cool

Everyone likes to see a button change when the cursor passes over it and on a click. Jasc has made this easier for the JavaScript challenged among us. PSP offers 6 rollover effects: Mouse over, Mouse out, Mouse click, Mouse double click, Mouse up, and Mouse down.

For each effect you'll need a separate image. If an image isn't provided, the original cell is used. It's not likely that you'll ever use all six effects on one image; you'll probably only need three images, one for the normal or up state, one for mouseover and one for on click. An easy way to do this is to create your original graphic. Make two duplicate copies of it, applying different effects or filters to the duplicates. For example, you could fade the image out for one state, and adjust the contrast to darker for another.

Creating a rollover effect can get a little tedious, but not nearly as tedious as learning JavaScript in an afternoon! For the example I created two images, the original and one for the mouseover effect. First you'll need to "export" your original image to the Slicer tool. Make all of your slices and save the settings. Then save the document to an htm file. Close out the dialog box.

Next, "export" your modified duplicate image to the Slicer tool. Load the settings from the original slices. Now wasn't that handy? There's your duplicate with the same slices! Save this image with it's selections to an .htm file. For ease of locating things later, I usually save rollover files with the same .htm file name, adding an underscore plus the button state. For example, buttonname_click.htm, buttonname_over.htm, etc. That may seem like a waste of time, but believe me, when you go to locate the various states of a single cell, it can be a life saver.

Using Windows Explorer, take a look at the directory you just save your .htm files to. Horrified by all those anonymous images? If your table contains several buttons with rollovers, you're going to find that you have a confusing array of images named Image[N]_1x1, Image[N]_2x1, etc. Wondering how you're going to find the right image for each table cell?

It's not as bad as it may seem. In PSP, open the original image in the image slicer and load the settings once again. Click on the Rollover Creator button to open the Rollover dialog box. Click the checkbox of the effect you would like to add.

Now for that file name. Open your _over.htm file in either a browser or your favorite editor. A quick check will tell you which series of images are the mouseover images. Note each image has a different set of numbers following it, 1x1, 2x1, etc. The first number represents the column, the second the row. All of the images in the first row will start with a 1, all of those in the second row will start with a 2, and so on. Armed with that information you should be able to locate the files for your rollover effects. Repeat the process for each of the effects you want to apply to the image.

The Image Slicer Tools
Slicing and Dicing with PSP 7
Optimize That Image!