• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 8. Creating Rollovers > Creating a Smart rollover button

Creating a Smart rollover button

Now you'll add a placeholder for the smart rollover button you're going to place in the floating box.

Click the Smart set button () at the top of the Objects palette, and drag the Rollover icon from the Smart set of the Objects palette to the empty floating box in the document window.

Dragging Rollover icon to floating box

The Inspector changes to the Rollover Inspector. The Rollover Inspector lets you specify three different images for three different states of a rollover button: how the button appears by default (Normal), how the button appears when your mouse moves over it (Over), and how the button appears when held down (Down).

First you'll specify an image for how the button appears by default.

In the Files tab of the site window, open the images folder and locate the 03_star.gif file.

Make sure the Rollover placeholder is selected in the index.html document.

In the Rollover Inspector, make sure that the Normal icon is selected. Then drag from the top Point and Shoot button () to the 03_star.gif file in the Files tab of the site window.

Notice that the Detect Rollover Images feature in GoLive automatically references the Over image, 03_star_over.gif.

Referencing the Normal image automatically references the Over image if the files are named correctly

The path to the file appears in the text box of the Rollover Inspector, and the button image appears in the document window.

If you are creating your rollover images in ImageReady, set the HTML output options to Include GoLive Code so your rollovers are fully editable in GoLive.

In the Rollover Inspector, click the Over icon to select it. Verify that the correct path and file name appear in the text box.

If you were adding a third action, associated with clicking the mouse button, for example, you would name the third source file for the button image filename_down.gif, and GoLive would automatically find and link to the correct image for the Down state of the button.

Both Smart and Lean rollovers manage their links within the JavaScript code. If you change the name or location of any file referenced by a Smart rollover object, GoLive automatically asks you whether to update the links for the Smart rollover. You don't have to keep track of rollover links yourself. You can test this by changing the name (in the site window) of one of the image rollover files you just linked, and pressing Enter or Return. GoLive will ask you if you want to update the necessary files. Click OK, and verify in the Inspector that the rollover image file name has been changed. If you do this, don't forget to change the filename back to the correct file name when you're finished.

Choose File > Save to save the index.html file.

Rollover images normally display with the same dimensions as the base image. If any of your rollover images have different dimensions, you can resize them in a graphic editor, or simply change the base image's Width and Height values in GoLive from Pixel to Image in the Image Inspector.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint