graphic rollovers : 

providing positive feedback

It's possible to make a graphic change when the cursor is placed over that graphic. This "highlight" provides positive feedback for the user, confirming that the graphic is an active button. Making a rollover involves creating one image for the default state of the graphic (no rollover), and another image for the "rollover" state. Then some JavaScript is added to the web page to change the image as needed:

• when the "onMouseOver" event occurs, set the image to the "rollover" graphic
• when the "onMouseOut" event occurs, set the image back to the "normal" graphic

Forntunately, Dreamweaver can write JavaScript automatically using its Behaviors feature.

download: rollover.zip (18K)

The download contains two Photoshop files needed for creating the images used in the exercises below.

Open these files in Photoshop, and save out the following files: rollover1.gif, rollover1_over.gif, rollover2.gif, and rollover2_over.gif. The files with the "_over" suffix are the highlight files that show when the cursor is over the graphic.

For the rollover1.psd file, you'll need to copy the text layer and change it's color for the highlight version. For both files, turn layers on and off as appropriate for the normal and highlight versions of each image. Use Photoshop's FILE>SAVE FOR WEB function to create the images.

create a rollover the easy way

• Position the cursor where you want the graphic rollover to appear in your page, and click to set the insertion point.
• Click on the "Insert Rollover Image" icon in the objects palette
  
  
• Type in a name for the image (the name should have no spaces or special characters). This name will be used to reference this image from the JavaScript that is performing the rollover behavior.
• Browse to the "Original Image" file. This is the image that is shown when the cursor is not over the graphic.
• Browse to the "Rollover Image" file. This is the image that is shown when the cursor is over the graphic.
• Normally, you check the "Preload Rollover Image" box. This ensures that the rollover image will be downloaded when the rest of the page loads. If this checkbox is not checked, the rollover image will download when you first rollover the graphic.
• Type in the alternate text associated with this graphic
• Browse or type in the link you want associated with this graphic. If you don't want to link anywhere, just put a "#" in this space.

using the swap image behavior

If you want a different image to change when you rollover, it's a little more complicated.

• Insert the image that will be changed
• Select this image and define a name (e.g. "rollover2") in the property inspector (in the upper left hand corner)
• Insert the other image that will cause the rollover graphic change
• Select this image and put a link or "#" character in the link box in the properties inspector
• Then, while the image that causes rollover is still selected, open the WINDOW>BEHAVIORS window
• First, you must enable the behaviors for 4.0 broswers. Using the "+" pull-down menu on the left, select the behavior/action "Show Events For>4.0 and Later Browsers"
• Using the "+" pull-down menu on the left, select the behavior/action Swap Image
  
• In Swap Image, select the name of the image you want to change (the first image inserted above, rollover2)
  

• Then browse for the replacement image (the highlight image)
• Note that you can select rollover images for as many named images as desired.
• Check the Preload Images and Restore Images onMouseOut checkboxes
• Select OK
• If you want a different event than a mouseOver to cause the image swap, you can change the event. Click on the "swap image" event, and then click on the downward pointing arrow at the right of the "Events" column. Select the event you want to cause the rollover change

There is a standard set of 216 colors that are known as the "web safe" colors. In the past, web designers have used only colors in web safe palette. The reason for this is that many older computers could only display a total of 256 different colors, and there were only 216 common colors between the Mac and the PC. Using colors other than those in the web safe palette would cause those colors to be displayed with dithering. I.e. a few of the 216 colors are mixed to create a substitute for the actual color.

But these days, less than 6% of web users use computers that only display 256 colors--either because they have very old computers, or because they use a version of the AOL browser the "compresses" the images down to the web safe colors. These users can still view web pages, but non web-safe colors will look dithered.

Given that so few users have this problem, and what they see still works, there is simply no reason to worry about the web safe colors anymore. But this is my opinion, and others disagree.

For more information about web safe colors, read this article in WebMonkey

For more information about the percentage of users viewing the with with 256 colors, see Browser News

in dreamweaver

The colors in the Dreamweaver color palette are all web safe colors. And by default, any other colors selected with be forced to be web-safe.

To use non web-safe colors, click on the upper right arrow in the color palette, and un-check the SNAP TO WEB SAFE option. Now you can use the eye-dropper to select any color from anywhere on the screen. And you can select the color selector and choose non web-safe colors without them being snapped to web-safe.

all materials on this web site © copyright 2003, Philip van Allen