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

Creating a Rollover Image

In traditional multimedia, a rollover indicates an image swap or some other event when the mouse is rolled within the boundaries of an object. A classic example is a button in a Web page. This object usually has three images associated with it:

  • The Up state is the image seen when the mouse isn't over the image.

  • The Over state is the image seen when the mouse is rolled over the image.

  • The Down state is the image seen when the mouse is pressed.

Captivate approaches rollovers a bit differently. In Captivate, a rollover is triggered when the mouse rolls over a hot spot. For example, the user rolls the mouse over the hot spot in the slide, and an image appears. When the user rolls the mouse off of the hot spot, the image disappears. This is an extremely valuable feature. For example, you can use rollovers for tool tips. In this case, the user would roll the mouse over a toolbar item, and a small image explaining what the item does would appear.

To add a rollover image

1.
Open the desired slide in the Edit View panel.

2.
Select Insert > Rollover Image or click the Rollover Image button on the Object toolbar.

The Open dialog box appears.

3.
Navigate to the image that appears upon the rollover, select it, and click Open.

4.
When the New rollover image dialog box appears (Figure 4.18), make your selections and click OK.

Figure 4.18. The New rollover image dialog box.


The image and hot spot appear in the slide (Figure 4.19).

Figure 4.19. The “rollover” image and its hot spot on a slide.


5.
Drag the image to its location in the slide, and make any necessary adjustments to the image and the hot spot.

To change the hot spot settings

1.
Open a slide containing a rollover image in the Edit View panel.

2.
Double-click the hot spot to open the Rollover Area dialog box (Figure 4.20).

Figure 4.20. Access hot spot settings by double-clicking the hot spot on the slide.


3.
Change the area's frame color by clicking the Frame Color chip and selecting a color from the color picker.

4.
Change the hot spot's fill color by clicking the Fill Color chip and selecting a new color from the color picker.

5.
Change the border width by selecting a value from the pop-down menu or entering your own value.

6.
Change the hot spot transparency by selecting a value from the pop-down list or entering your own value.

7.
Click the Options tab, select a transition and its timing, and decide whether these changes will be applied globally to all hot spots in the movie.

8.
Click OK.

9.
Drag the hot spot to its location in the slide.

10.
Resize the hot spot by selecting it and dragging the handles inward (smaller) or outward (larger).

✓ Tip

  • Previewing a rollover is actually quite simple. Rollovers on a slide are indicated only by the hot spot. Click the hot spot, and the associated image appears on the slide.


Touring the Rollover Image Dialog Box

The Rollover Image dialog box is quite robust and offers you a high degree of flexibility. Your choices are:

  • Transparency Select a value for the image's transparency in the slide. A value of 0 means no transparency. A value of 100 essentially makes the image invisible.

  • Transition Select how the image is handled when it appears in the slide.

  • Preview Displays a preview of the selected image.

  • Reset to Original Size Click to revert back to the original size of the image.

  • Change Image Click to change the image to another image.

  • Transparent Background Click this for odd-shaped images such as round buttons or masked images sitting on a solid background. Be careful with this one. This option has absolutely no effect upon square or rectangular images.

  • Apply properties to all Rollover Image items on all slides Click to apply the settings for the selected image to all rollover images in the movie. Be careful with this one as well.

  • Options tab Determine how and when the image appears on the page.

  • Audio tab Assign an audio effect to the rollover.


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