Building Remote Rollovers

 < Day Day Up > 



Remote rollovers — also known as disjoint rollovers or multiple-event rollovers — are graphics that use the Swap Image behavior to trigger an image swap for a graphic rather than the triggering button graphic. Remote rollovers are useful because they allow more than one image to display in a single location — triggered by users moving their cursors over different button graphics.

To incorporate remote rollovers into your pages, use the Swap Image behavior. You can set up a remote rollover to work in conjunction with existing rollover buttons or as a separate interactive element.

Adding remote rollovers to existing rollover buttons

The key to adding a remote rollover when you already have rollover buttons set up in your page is to add to the existing Swap Image behavior rather than add a new Swap Image function. To do this, you edit the existing attached behavior for each button.

 Habitat Alert site   In the following steps, you add remote rollovers to the Habitat Alert page provided for this exercise. This page contains existing rollover buttons as added in the previous rollover buttons exercise. In this exercise, you use the image in the circle as a region to add a remote rollover:

  1. In your Chapter 40 defined site, using the Site panel, locate the folder and file html\site\remote_rollovers\remote_rollovers.htm.

  2. Select the circle image (the bird) and name it remoteinfo using the Property inspector.

  3. Now select the LEARN button (btn_learn) and go to the Behaviors panel to edit the attached Swap Image behavior. Double-click the Swap Image behavior to open it.

  4. Click the image list to locate and select remoteinfo.

    Tip 

    When you try to select a new image from the list of images in the Swap Image dialog box, a small bug in the program pops the list back up to the preselected button image. To work around this, click into the list anywhere, locate the desired image, and select it. While annoying, this bug is not serious, and it is likely that Macromedia will fix it with the next release.

  5. Click the Browse button and navigate to remoteimages folder inside the remote_rollovers folder. Locate and select the  learn.jpg image.

  6. Notice that two of the images listed have asterisks beside them. The asterisks indicate that an image swap will occur for this image. Click OK.

  7. Repeat Steps 3–6 for each button, each time opening the existing rollover's Swap Image behavior and selecting remoteinfo in the list before clicking the Browse button to choose the correct image from the remoteimages folder.

  8. Save and test this page. Move your cursor over the buttons to view the remote rollovers. Figure 40-2 shows the image that swaps into the circle when you move the cursor over the LEARN button.

    click to expand
    Figure 40-2: The circle image swaps as you move your cursor over the buttons.

    Tip 

    The more thought put into your remote rollovers during the design process, the more useful they'll be to your site visitor. If you chose an image that conveys what will be found in a site's section, your remote rollover provides clarity for the user. You can even incorporate graphic text into images to explicitly state what might be found in the section.

Every image increases the overall download time for your page. The clarity those graphics provide isn't useful if the user gets tired of waiting for the download to end.

Other remote rollover options

Existing rollover buttons are not required to set up a remote rollover. You can trigger an image swap for any image on your page by moving your cursor over any link, image, or text. Two things are required:

  • An image, named and surrounded by an <anchor> tag, must already be present in the page.

  • A remote link, text, or graphic must be selected to add the Swap Image behavior.

You cannot use the Swap Image behavior to make an image appear where no image already exists; this behavior swaps only the image src. But any link can be used to trigger the remote rollover.

To set up a remote rollover in this fashion, place your cursor into the triggering link, add the Swap Image behavior, and select the named image that should be swapped. Click the Browse button to locate the correct image and click OK.

Also, be sure that all the images used for the swap have the same dimensions as the original image. Only the src swaps; width, height, and all other attributes remain the same. This is true for rollover buttons as well.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net