Section 89. Detecting Rollover Images in GoLive


#89. Detecting Rollover Images in GoLive

One of the timesaving features in GoLive is its ability to detect rollover images by looking for commonly used suffixes to filenames such as "-out, -over, -down" when you add the main graphic to a page. For instance, if you created a graphic named "about.gif" and named the over and down states "about-over.gif" and "about-down.gif," GoLive will automatically associate the images to the main graphic in the Rollovers palette and produce the necessary code to string all the rollover states together, including efficient preloader code.

Keeping Rollovers Smart with ImageReady

ImageReady excels at helping you create button graphics with rollover states. What's more, GoLive and ImageReady work really well together. So instead of saving your optimized graphics in ImageReady, add your ImageReady file as a Photoshop Smart Object to your GoLive site with your rollover states assigned. When you add the Smart Object to a page in GoLive, your rollover states are still automatically detected, and you gain the flexibility to quickly make changes to the ImageReady file.


GoLive's Detect Rollover Images feature is on by default. So to take advantage of it, you just need to make sure GoLive is aware of your file naming conventions and that you save all your images in the same folder. To review GoLive detection settings, open the Rollovers palette (Window > Rollovers) and choose Rollover Detection Settings from the palette's menu. This actually brings up the Rollover settings in GoLive's Preferences dialog (Figure 89a). You can choose to follow any of the naming conventions shown or add your own naming scheme by clicking the New Item button . Click OK when you've finished reviewing the detection settings.

Figure 89a. Use the Rollovers Preferences to see which naming conventions GoLive is set to detect, or add your own.


Now create and save all your rollover graphics to a folder within your GoLive site, using a naming convention GoLive is aware of. Drag your main graphic of the rollover set into a GoLive page. A small rollover icon appears in the lower-left corner of your graphic, letting you know that GoLive has detected your rollover states. Go to the Rollovers palette, and you'll see that all your rollover states have been automatically created (Figure 89b). Switch to Preview mode to see your rollovers in action.

Figure 89b. Once you've added your main graphic, GoLive intelligently detects the other rollover images in the set and then builds the entire rollover interaction for you in the Rollovers palette.





Adobe Creative Suite 2 How-Tos(c) 100 Essential Techniques
Adobe Creative Suite 2 How-Tos: 100 Essential Techniques
ISBN: 0321356748
EAN: 2147483647
Year: 2005
Pages: 143

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net