May 5
Interactive Rollovers in Adobe ImageReady

In a scenario like this, it would be important to know the language in order to determine whether this soldier was threatening you or someone else. At the same time, we'll learn the Latin terms for some common body parts. So let's get started. Click the image at the bottom of the page or here to see the final project.

The theory
We're going to use a picture of a Roman soldier. You move the mouse over a body part to read a Latin phrase pertaining to that body part. You then click on the body part to read the English translation.

So, to start, we're going to want to create "hot spots" over the various parts of the body we'll be using. For example, we'll need to select the eyes, ears, mouth, legs, etc. and tell the program that when we move the mouse over those areas, we'll see a little speech balloon with some Latin words in it. Then, when we click on those pots, we'll see an English translation.

Our first step is to get a royalty-free image of a Roman soldier, which I happen to have. Royalty-free images are bad for artists, but, on the positive side, they're usually quite bad. Next we make a generic speech balloon—one big enough to contain our largest phrase. We can do a custom balloon for each phrase, but you'd be torturing the people visiting your site because these complex rollovers are quite large. The fewer elements the better.

Now we bring both the soldier and the speech balloon into ImageReady. We'll create a white background at Layer 0, put the soldier on Layer 1 and place the speech balloon on Layer 2. (Simply pasting the images in ImageReady will automatically generate new layers for each element.

The background, in this case white, should be visible, as should the soldier. But do not yet make the speech balloon visible. You can turn it off in the Layers palette by clicking on the "eye" icon to the left of the layer preview.

Now we're good to go.

Creating slices and adding rollover states
The next steps are time-consuming and repetitive but quite simple. We'll start with the eye. First, use the marquee tool to draw a square around the eye of the soldier. Then go to the Slices menu and choose "Create Slice from Selection." If your Slices palette isn't already open, open it now by selecting it in the Window menu.

Now, within the Slices palette, click on the Rollover tab. Then create a new rollover state by using the menu in the palette or by clicking the New Rollover State button.

This will create a second preview within the palette and will automatically be an "Over" state, meaning that whatever changes we make to the image will appear to the end user when his or her mouse moves over the area. In our case, the speech balloon and Latin phrase will appear.

In the Layers palette, turn on your speech balloon. Now select the Type tool and type your Latin phrase. I want the phrase "Gallum cum ocillis meis video" to correspond with my eyes, so I type this in the upper portion of the speech balloon. I give the type whatever look I want and then deselect it.

Now, within your Rollover palette, create a new rollover state, as before. This will automatically create a "Down" state, which means the changes will show up when the user clicks on the area. In our case, the user will continue to see the speech balloon and the Latin phrase, but, when users click, they'll see the English translation. To add the English translation, we just type it in. (A new layer will be created automatically when you start typing.) My particular translation for this phrase is, "I see a Gaul with my eyes." The Gauls were a group of Europeans occupying what might roughly be called France. Surprisingly, they did not get along well with the Romans and fought them, unsuccessfully, quite often. Some historians believe the Gauls were quite snooty, but I find this hard to believe.

We now have our first rollover and down state. You can check your work by going to the File menu and selecting "Preview in > Internet Explorer 4.5."

Lather, rinse, repeat
For subsequent rollovers, just repeat these steps. Select the mouth (for example); then select "Create Slice from Selection" from the Slices menu; then create a new state and turn on the speech balloon and type your Latin phrase; then create another state for the English translation.

When you're satisfied with all of your rollovers, you're ready to export the project for the Web. In the File menu, choose "Save Optimized as," and save your files. ImageReady will create several images for you and put them in a folder called "images." To make things easy for yourself, make sure the images folder will reside in the same directory as your final HTML document. Otherwise you're going to have to go in and change your code manually, and there can be a lot of code involved.

ImageReady also generates an HTML file. Just copy out the parts that go in the header section of your final HTML document and paste them there. Then copy the parts that you where you want your final image to appear and paste them there. You're done! If you want, you can compress your files further in another program like Fireworks, but the process can be excruciating, especially with a large number of slices.

Click here to enjoy your lesson in Latin!

Post a message in the Creative Mac World Wide User Forum!

Find out more in the Adobe Photoshop User Forum!

For more tutorials, click on the images below or visit our Tutorials Page.

Are YOU a Mac expert? Do you have some time-saving, image-building, knock-your-socks-off tricks up your sleeve? Share them with the rest of the Mac community and be forever bathed in glory. But make it a quickie: You have 58 seconds, give or take a few minutes. Send an e-mail to producer@creativemac.com Read Previous 58-Second Tutorials