Roll Over Effects in Dreamweaver CS5
- A roll over effect requires at least two images. The first image is the initial image displayed on the Web page when it loads, and the second image gets swapped in when the cursor is put over the first image. An optional third image can be used as a substitution for when the user clicks on the image itself. These images can be made in Photoshop, or another image editor, as a set so that any text elements or graphical elements are spaced identically on each image.
- Dreamweaver's default way of doing roll over images is with JavaScript. You define a behavior linked to a specific element on the page, and that behavior has specific actions it responds to. These behaviors and actions are simplified versions of commonly used JavaScript code; look on Dreamweaver's "code view" to see the JavaScript put into place on your Web page as you do this. The specific behavior that's being added for a JavaScript image roll over effect is the Swap Image Behavior.
- Cascading Style Sheets, or CSS, are a way to separate the appearance of text and the positional aspects of various elements in a Web page from the actual text itself. CSS can also be used to generate image roll overs and drop-down menus in Dreamweaver, though it requires hand-editing code to do so. The advantage of doing this with CSS is that it works even when a user is running his browser with JavaScript turned off. The disadvantage is that it's not as flexible and a little more difficult to set up the first time. It also allows you to define roll overs for an entire website that are loaded once, rather than every time a page loads.
- Every time you use an image roll over with JavaScript, you are causing the Web page to load two or three images. This can slow the loading time of the Web page for new visitors, potentially causing them to hit the "Back" button. Like with many Web design elements, it's a question of whether a slower page load speed is worth the added attractiveness on the website.
