Mouseover Behaviors

Because the mouseover behavior is so popular, Dreamweaver includes an icon in the Common Insert Palette called Insert Rollover Image. Just click the icon next to the Insert Image icon and you access one simple dialog box for inserting your mouseover behavior.

Dreamweaver creates all the Javascript code for you, but you have to supply some information. First off, the image must have a name. Note that this is not the image filename, but rather a unique name that is used by the Javascript code to identify the image which will be assigned the action.

Next you have to choose two images: first the original image, then the rollover image. You can use the Browse button to open your site folders to specify which image files you want to use.

Also please note that your original and rollover images should be the same size (pixel dimensions). If your images are not the same size, your rollover image will be distorted, as it will be displayed with the same dimensions used for the original image.

Finally, the rollover behavior must be associated with a link. Type the URL in the bottom line, or use the Browse button to locate another HTML file you plan to link with the rollover image. If you do not associate a link with the rollover behavior, Dreamweaver will automatically insert the pound sign (#) into the URL area, essentially telling the browser that the link is to the current location in the current document.

Save your file and give it a test. See, that wasn't so bad now, was it?