| This exercise demonstrates the process of creating rollovers from graphics that have already been placed on the page. The result is the same as the last exercisean image swaps to show a different image when the user rolls over it. In this exercise, however, you are using a different method to insert rollovers: You will insert the behavior for the rollover using the Behaviors panel. When you are creating your own Web pages, you should use this method if you have already placed your original images on a page. If the original images are not yet on the page, you can use the method from the previous exercise to set both the original image and the rollover image in one step. 1. | Name the six section navigation images in the table at the top of the page using the image name text field in the Property inspector. The image names should be as follows: about.gif should be named about, community.gif should be named community, explorations.gif should be named explorations, schedule.gif should be named schedule, teachers.gif should be named teachers, and training.gif should be named training. For each of the navigation images, link them to their respective pages using the technique described in Chapter 5 in the section "Creating Graphic Links."
 Naming the images to match their content or their function is a good method. This naming practice helps to clearly indicate which images are associated with the chosen names.
| | | 2. | Select the about link using the tag selector, being careful not to select just the image. Open the Tag inspector panel and click the Behaviors tab.
The Behaviors panel opens.
 Tip You can also choose Window > Behaviors to open the Behaviors panel. | | | 3. | Click the plus sign (+) button on the Behaviors panel and choose Swap Image from the Actions menu.
 The Swap Image dialog box opens. The Swap Image behavior is what creates the rollover effect you used in the previous exercise: It swaps a new image in to replace the original image that the visitor rolled over. The behavior is a combination of an action and an event.
An action is what happens as a result of user interaction. When you select an action, Dreamweaver adds that action to the list in the Behaviors panel. The Actions menu displays or disables actions depending on which element you selected in the Document window. The action is this case is the swapping of one image for another.
Dreamweaver also adds an appropriate event (or events) for that action automatically. The event is what causes the action to occur. An event could be the user rolling over an image or clicking a button, for example. In this case, the event is onMouseOver, which is the Dreamweaver default for rollovers. You will learn to select specific events later in this lesson.
 | | | 4. | In the Images list, make sure that the about image is selected.
The image is listed as "about," which is the name that you defined (in Step 2 of this exercise) for the image that you selected and added an action to through the Behaviors panel (in Step 4 of this exercise). By selecting the about image in the image list in the Swap Image dialog box, you designate that when a user rolls over that image, it is replaced with a rollover image. You will choose the rollover image in the next step.
Note If you were to choose a different image from this list, the selected image would be replaced with the rollover image when the user rolls over the about image because the about image is the one to which the behavior is appliedyou will do that in the next exercise. Keep in mind that if you don't name your images, they all appear with the name, "unnamed <img>" in this dialog box. You can see a number of instances of "unnamed <img>" in this dialog box because you named only seven images. This is why it is so important to name your images properly; it is very hard to work with behaviors if the images are not clearly and logically named. In a list full of unnamed images, it can be difficult to distinguish which images you are working with.
| 5. | Click the Browse button next to the Set source to text field and find the about-on.gif image in the Lesson_08_Interactivity/explorations/images folder. Click Choose (Macintosh) or OK (Windows) to select the image for use as the rollover image.
Set the source to define what the rollover image will be. Setting the source is the same as choosing the rollover in the previous exercise. Generally, the original appearance of an image is known as the "off" state, and the instance of the rollover when the user moves the pointer over the image and the image changes is known as the "on" state. Images used for the "on" states often look as if a button has been pressed or a word has been highlighted to indicate to the visitor that the object is an active or linked element.
All the rollover graphics you will use for this exercise are in the images folder, and the names of the rollover-image files have the suffix -on. Developing a logical and ordered naming system for your images, such as about.gif for the original image and about-on.gif or about-over.gif for the rollover image, will help you keep graphics organized and will make it easier to find the appropriate image.
After choosing the image, you are returned to the Swap Image dialog box. An asterisk appears at the right end of the image name in the Images list to indicate that an alternative image has been assigned to it for the rollover.
| | | 6. | Make sure that the Preload images and Restore images onMouseOut checkboxes are checked; then click OK.
 As with the rollovers you inserted in the previous exercise, the Preload images option is checked by default. This option causes the images to be loaded at the time the page is called up by the browser instead of waiting to load until the browser needs to display the image.
The Restore images onMouseOut option is also checked by default and is recommended. This option makes your swapped images revert to the original images when the user rolls off them.
Note Restore images onMouseOut is done by Swap Image Restore, which is available as a separate action in the Behaviors panel. Both portions of the behavior are now listed in the Behaviors panel: The onMouseOver event causes the Swap Image action and the onMouseOut event causes the Swap Image Restore action. The combination of these actions and events creates the rollover effectthe image swaps when the visitor moves the pointer over the image and it swaps back when the visitor moves the pointer off the image.
 | 7. | Repeat Steps 3 through 7 for the remaining navigation section titles using the -on versions for the rollover images that you define in the Set source to text field.
If you ever need to delete a behavior, you can select the object in the Document window that contains the behavior, select the action in the Behaviors panel that you want to delete, and then click the minus sign () button at the top of the Behaviors panel. You can also delete a behavior by selecting it and then pressing Delete (Macintosh) or Backspace (Windows).
Note In Dreamweaver 8 it is no longer necessary to have a link applied to an image for rollovers to function. Instead, rollovers can be applied directly to the images themselves. However, there are two good reasons not to do this: first, it doesn't work in older browsers, and second, you'll have rollovers that don't actually do anything when the visitor clicks them. Web surfers have learned that rollovers mean clickable, and if your image just has a rollover without also being a link, your site will be confusing. | | | 8. | Save your file and test the rollovers in your browser.
|
Notice the images change when you roll over them. |
