When creating web interfaces it is often all too easy to forget the sheer power and features that Adobe Photoshop's sister application, Imageready, has to offer.   The aim of this article is to provide an insight into remote rollovers, a feature which automatically combines images, Javascripting, and HTML code to create interfaces that respond according to pre-defined user actions.   All you need to get started are a suitable interface design, Adobe Illustrator CS or greater, and a little time.   Interested?  Read on...

Note: There are many different types of rollovers - replacement rollovers which replace the original image with a new image, addition rollovers which add visual elements to the existing image, and remote rollovers, which trigger different images in different locations on a Web page. This article concentrates solely on the last rollover type.
 

Step 1: Using the Slice Tool and Slice Select Tool, slice up your interface into appropriately-sized portions.  Generally speaking, you want to ensure that each button is in its own slice, and that the area you want to change during the 'rollover' is also within its own slice, with no overhang. All content must be prepared prior to going any further, with rollover content available but hidden until needed. This step can be quite complex, so if you are inexperienced or need more detail, you should perhaps refer to the Interfaces & Imageready tutorial before going any further.

Step 2: Select one of your button slices in the slice palette, and then right click on it to bring up a drop-down menu. Click on the Add Rollover State option to create a new rollover state.  Simple, huh?  Select this new state in the slice  palette by left-clicking on it.  By default, the new rollover state will be "over". You can change this to down, click, out, up, custom, or none. We want it to be over in this case, since we're creating a rollover. Theory: Rollover states work by recording changes from your original image.  Lets say, for example, that you have two images, called 'A' and 'B' in your interface, overlaid so that B is totally hidden behind A.   In your rollover state, you can specify that when the mouse is over a specific slice, the A graphic vanishes, thus leaving the B.   Thinking in this manner, it is easy to define mouseover states for various button states to give the impression of interaction in your interface.

Step 3: Well, now that I have explained the theory of it all, go back to your layers palette and adjust your slices to turn on the visibility of the image you want to be shown when you mouseover the button.

Step 4: And now for the easy bit.  Look for the spiral to the left of the rollover state for your button slice. Now click and drag the line to your image(s) to associate that rollover with other slices.  Repeat steps 2-4 for all the rollover states you need, and then save your work as a workable interface by choosing File > Save Optimized As from the main menu.  In the dialog box that pops up, specify a new blank directory (you may need to create this manually), pick a name for your HTML file, choose HTML and Images from the Format pop-up menu and click OK.   A few seconds of processing later, and your interface will be ready in the directory you specified, awaiting further manipulation as necessary.

Example: The concepts explained above are very simple in operation, but notoriously hard to explain on paper.  To explain what I have done, and what remove rollovers are capable of, here's an interface I prepared earlier:

- Tutorial written by Jimmy1012

Automatic Translations: