Using Adobe GoLive CS, Part 3 - Rollovers
(Page 2 of 15 )
If you've ever visited a Web site and put your cursor over an image only to have it change color, you've likely encountered a rollover. A rollover is an image whose appearance changes as the user rolls her mouse over it. Combined with hyperlinks, rollovers give the user a clear visual clue as to which item she is about to click. Rollovers are created by using a different image for each state of the mouse. For example, you could assign a blue button image when the mouse is not on the button, and a yellow button image when the mouse is over the button.
GoLive CS includes a nifty feature called automatic rollover detection, and it is a real time-saver. Simply by naming your images in a particular way, you can enable GoLive to recognize them as rollovers and automatically write and implement the necessary JavaScript to make the rollovers function. To access settings that make this detection possible, open the Rollovers & Actions palette from the Window menu, and then choose Rollover Detection Settings from the palette's flyout menu (see Figure 9.62).
Figure 9.62 You can access the automatic Rollover Detection Settings from the Rollovers & Actions palette's flyout menu.
By default, three sets of naming conventions are already included in the list, but you can easily edit any of the defaults, or add your own set. How does it work? It's simple. If you place an image onto a page that is named house.jpg, and there is another image in your Files list called house_Over.jpg, GoLive automatically detects this pair and creates the JavaScript rollover. As you can see from the detection settings, you can have multiple states for an image, though Normal and Over are the most widely used (see Figure 9.63).
If you prefer, you can create rollovers manually in the Rollovers & Actions palette. Select an image on the page, and then choose a State in the list. Next, click the Create New Rollover Image button and link to the image you want to use for that state.
Figure 9.63 You can apply as many as six different states to a rollover automatically, simply by naming the images a certain way!
Integration Using Photoshop CS, ImageReady CS, Illustrator CS, or Acrobat PDF Files
One of the most compelling features (and definitely the coolest feature) of GoLive is its integration with the other applications in the Creative Suite. Through the use of Smart Object technology, it is possible to use your native Photoshop, ImageReady, Illustrator, and PDF documents in your Web pages. You read that correctly! GoLive accepts the native Photoshop, Illustrator, or PDF file and compresses it to an appropriate Web format. But the magic begins when the source file is edited, because those edits are automatically reflected in the Web-ready version of the image.
Take a native Photoshop ( .psd), Illustrator ( .ai), or Acrobat PDF document ( .pdf), and drag it into an open GoLive HTML page. GoLive immediately recognizes the .psd, .ai, or .pdf filename extension as a friendly file type, one to embrace and care for. GoLive's first step toward accommodating the source document is to bring up the Save for Web dialog box, which will allow you to determine an appropriate Web file format for the image, adjust compression settings, resize the image if necessary, and then save the resulting GIF, JPEG, or PNG file into your Web site (see Figure 9.64). During the Save process, GoLive helpfully assigns the Web-friendly version of the image a filename based on the source file.
Figure 9.64 The Save for Web dialog box is built right into GoLive CS, allowing you to easily prepare images for the Web.
The Save for Web dialog box offers a wide variety of views and tools:
Original tab—Shows the image in its original form.
Optimized tab—Shows the image after optimization has been applied.
2-Up tab—Shows original and optimized versions next to each other. Click one to edit its settings.
4-Up tab—Shows original and three variations of the optimized image. Click one to edit its settings.
Hand tool—Use to move the image in the window.
Slice Select tool—Use to select a slice when optimizing a sliced image from Photoshop, ImageReady, or Illustrator. Click the slice to edit its settings.
Zoom tool—Zooms in when you click on the image. Press the (Option) [Alt] key to zoom out.
Eyedropper tool—Click on the image with the Eyedropper to select a color.
Eyedropper color—Shows the currently selected color.
Toggle slices visibility—Makes the borders of slices visible or invisible.
Settings area—Choose the optimized file type, compression levels, transparency and dither types, and matte settings.
Preset pop-up menu—Shows a list of preconFigured compression settings. Choosing one alters settings in the Preset area.
Preset flyout menu—Save, edit, or delete settings from the list in the pop-up.
Color Table—Shows colors used when GIF or PNG-8 is selected as the file type.
Image Size—Adjust the image size, and then click Apply.
Cancel button—Closes the Save for Web window without applying the settings.
Save button—Closes the Save for Web window and opens the Save dialog.
When created, the Smart Object, called the target file, retains a link back to the original document, and it will be updated if the original is changed. The original document is referred to as the source file. You'll know it's a Smart Object and not a plain old GIF or JPEG because of the small icon in the lower-right corner (see Figure 9.65).
Figure 9.65 Smart Object target files are indicated
by an icon in the lower-right corner.
To reopen the source file in Photoshop or Illustrator, just double-click on the target file. Edit the source file in its originating application, save it, and then flip back to GoLive. The target image will automatically update without asking you to recompress it, resize it, rename it, or anything!
 This chapter is from Teach Yourself Adobe Creative Suite, by Mordy Golding (Sams, 2004, ISBN: 067232752X). Check it out at your favorite bookstore today.
Buy this book now. |
Next: More on rollovers >>
More Web Authoring Articles
More By Sams Publishing
