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

Creating a rollover

Now you'll make a rollover on the page. Rollovers are images that change in appearance when you move the mouse cursor over them or click and hold the mouse button down on them. GoLive rollovers use the Detect Rollover Images feature, which automatically assigns over and down images in one step if you used the appropriate naming convention. You'll learn more about this in Lesson 8, “Creating Rollovers.”

Scroll to the top of the questions.html document window.

Click the Basic button () at the top of the Objects palette, and drag the Image icon from the Basic set of the Objects palette to the top right side of the layout grid on the questions.html page.

In the Basic tab of the Image Inspector, drag from the pick whip button and link it to the file box.gif. The Rollovers & Actions palette will appear automatically.

Because your files are correctly named and saved in the same folder, the box_over.gif is automatically referenced for the over state in the Rollovers tab of the Rollovers & Actions palette.

If you don't like the position of your new rollover, simply select it and drag it to a new position. You'll learn how to precisely position objects in later lessons.

Because you are in the Layout Editor, the Web page shows the Normal image for the rollover. Now you'll check the Over image using the GoLive Preview Editor.

Choose File > Save.

It is always a good idea to save a page before previewing it.

Click the Preview tab in the document window, and move your mouse cursor over the matchbox at the top right of the page. You should see both states of the rollover button—that is, the matchbox will open and close.

When you are finished, click the Layout tab to return to the Layout Editor.

Close the Rollovers & Actions palette.

Choose File > Close to close the questions.html file.

If you check the Files tab in the site window, you'll see that GoLive has added a GeneratedItems folder. This folder contains JavaScript code for the rollover.



Not a subscriber?

Start A Free Trial

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