Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Adobe GoLive Tip of the Week Create Automatic Rollovers with Adobe GoLive 6

Edited by Derrick Story

GoLive 6 makes the tedious process of building mouse rollovers easier than ever.

In addition to being able to build your rollovers in the Inspector, GoLive 6 learns how you name the image files that make up the multiple rollover states so all the required images are detected and all the JavaScript code is written (including preloading) automatically! To teach GoLive 6 how you name your rollover images, select any image in Layout mode and choose "Rollover Settings..." from the Image Inspector palette menu, as shown below.

Choosing Rollover Settings... from the Image Inspector palette.

The Rollover Settings are case-sensitive and support up to three unique naming patterns. The Rollover Settings dialog box, as shown below, includes a good explanation of how this feature works.

The Rollover Settings dialog box.

After you've taught the Rollover Settings how you name your rollover images, there are a few ways to use this time-saving feature. The method you choose depends on whether you want to use the Smart Rollover object or the new, Lean Rollover feature. Smart Rollovers include up to three states, includes browser preloading code, takes advantage of the external JavaScript library, are completely managed (images and hyperlinks) by the Site window, and can be combined with other GoLive JavaScript Actions. The new, Lean Rollovers offer all the same features except the ability to be combined with other GoLive JavaScript Actions.

Lean Rollovers

To use automatic rollover detection with Lean Rollovers just drag the normal state image to the document window in Layout mode and watch in amazement! Look in the Rollover section of the Image Inspector palette to see how GoLive uses your Rollover Settings to automatically find all the images for multi-state rollovers and write all the JavaScript code, including the preloaders.

Setting up Lean Rollovers in GoLive 6.

Smart Rollovers

To use automatic rollover detection with Smart Rollovers put a Smart Rollover placeholder on your page. Then use the point-and-shoot tool from the Smart Rollover Inspector to select the image for the normal state from the Files tab of the Site window. When you select the normal image GoLive will automatically detect the other images and write all the JavaScript code for you.

Setting up Smart Rollovers.

Another Detection Method

If you've already placed a normal state image on your page there's another easy way to automatically create the rest of the rollover. Select the image (plain image or Smart Rollover image) in Layout mode and select Detect Rollover Images from the Inspector palette menu, as shown below. Voila!

Detecting rollover images.

To learn more about Adobe GoLive 6, visit Adobe's GoLive product page. If you want to learn more power-user tricks, visit Adobe's Expert Center (Registration required).