Adding Rollovers

Web users love rollovers , also called mouseovers. There's something endlessly pleasing about running a mouse over a page and watching things change. A color changes, an image changes, an image somewhere else on the page changes or pops up. What fun! Web users also expect rolloversif they move their mouse over an image and nothing happens, they'll assume that it's not a link and move on to something else.

To add a rollover:

1.	Prepare two images, such as those in Figures 12.7 and 12.8 , for the rollover's Up and Over states. Figure 12.7. An example of an Up state image. Figure 12.8. An example of an Over state image.
2.	Position the insertion point in the document where you want the rollover to appear.
3.	On the Common tab of the Insert Bar, click the arrow beside the image icon ( Figure 12.9 ). Figure 12.9. The image icon on the Common tab of the Insert Bar has a pop-up menu with several options.
4.	Select Rollover Image. or Select Insert > Image Objects > Rollover Image.
5.	The Insert Rollover Image dialog appears ( Figure 12.10 ). Fill out the fields: Image name : This is the name that JavaScript will use internally to refer to this image. Original image: The Up state of the image, which is what will display when the page is loaded. Rollover image: The Over state of the image, which is what will display when the user 's cursor is over the image. Preload rollover image: This should be selected so the Over version of the image is in the browser's cache when it's needed. Don't make the users wait for the Over image to downloadthey might think the page isn't working and give up on your site. Alternate text: This is the alternate information for users with non-graphical browsers. When clicked, Go to URL: This is the URL of the Web page you want to open when the user clicks the image. Figure 12.10. Specify the original image and the rollover image to insert a rollover image.
6.	Click OK to accept the changes.
7.	Check the default event in the Behaviors panel to be sure it's the one you want ( Figure 12.11 ). Figure 12.11. Be sure the Swap Image Restore behavior is added along with the Swap Image behavior.

Tips

• Dreamweaver won't display the rollover. You must preview the page in a browser to see it.

• Select the behavior in the Behaviors panel if you want to change the mouse events or edit the parameters of the Insert Rollover Image dialog.

• To create multiple rollovers, use the Set Nav Bar Image behavior instead, as described in the next section.

Image States

To understand rollovers, buttons , and navigation bars, you need to know something about image states. An image state corresponds with a mouse event. The most common image states are:

• Up This image appears when the page first loads. It's the default image, in that it's what is displayed unless the user is interacting with this image.

• Over This image appears when the user moves the mouse over the image.

• Down This image appears when the user clicks the image. Down state images are often used in navigation bars to indicate the current page.

• OverWhileDown This image appears when the user moves the mouse over an image after clicking.

Most rollovers only use the Up and Over states.