TIP 179: Saving Time with Automatic Rollover Detection

Creating rollovers isn't very hard, but if you have to create lots of them for a site or a complex navigation bar it can become very tedious. GoLive makes this tedious process easier than any other Web-authoring application in the world, and it happens to be one of our favorite features.

GoLive is one smart puppy. It can learn new tricks, such as recognizing how you name the image files that make up the multiple rollover states. When you train GoLive, it can sniff out all the required images and write all the JavaScript code, including the Preload option, automatically. To teach GoLive how you name your rollover images, choose GoLive > Preferences (Mac) or Edit > Preferences (Windows) and select Rollover in the Images category on the left.

The rollover settings are case sensitive and support several unique naming patterns, and the bottom of the Preferences dialog includes a good explanation of how this feature works (Figure 179a). The default settings match the output defaults for Adobe ImageReady, and you can add your own file naming schemes.

Figure 179a. The rollover detection settings let you teach GoLive how you name your rollover images.

After you teach the rollover detection settings how you name your rollover images, the rest is a piece of cake. Just drag and drop the Normal state image into the Layout Editor and watch in amazement as GoLive automagically finds all the images for multi-state rollovers, writes all the JavaScript code, and includes preloading code. You can see all the new rollover states listed in the Rollovers palette (Figure 179b).

Figure 179b. After GoLive detects your rollover images, you can see the results and customize the rollovers in the Rollovers palette.

A Real Turn Off

Every time you use the automatic rollover detection feature, the Rollovers palette will open automatically. If that starts to annoy you just turn it off in the application preferences. And if for some crazy reason you don't want to use automatic rollover detection at all, you can also disable the entire feature in the Rollovers section of the Image preferences.

If you have already placed a Normal state image on your page, there's still an easy way to automatically detect the rest of the rollover images. Select the image in the layout and select Detect Rollover Images from the Rollovers palette. Voila!