Dreamweaver comes packaged with pieces of JavaScript that you can add to your web pages without learning JavaScript coding. These pieces of code are called Behaviors. One of the Behaviors available, will cause an image to switch out when the mouse rolls over it. This Behavior has an additional feature that will switch out a different image than the one the mouse is over. This is particularly helpful, when you have a set of thumbnails, and you want the main image to switch. The following works with Dreamweaver 8. Later versions of Dreamweaver may not have this available or may have a different method to do it.

Here is an example of a web page with a series of thumbnails and a main image:

Whe the mouse is rolled over one of the thumbnails on the left, the main image switches to an image of that finish. See image below.

To Create the Rollver Effect

First, create the complete web page and get all the images ready. That means that you will have a thumbnail size of each image and a full size of each image. Be sure that the images are well organized in your folders, or it will take a lot more work to create the rollover effect.

Second, name each image. If you click on an image, you can tell it is selected because little black boxes will appear on some of the edges. When an image is selected, you can name the image in a box in Properties. See illustration below.

Name each thumbnail something that represents the content of the image, but name the main image something generic, such as MainImage.

Third, click the first thumbnail image and go to the Behaviors panel on the right side of the screen. If you don't find the Behaviors panel, go to the Window menu and click on Behaviors. Notice the example below already has Behaviors attached.

The following instructions will only work if you have clicked the thumbnail image because the JavaScript code has to be added to each thumbnail specifically.

Fouth, click the + on the panel. This will drop down a menu. Choose Swap Image. In the Swap Image Dialog box, you will see a list of the images you have named. Notice that, in the example below, all the thumbnails are indicated with the word "Thumb" in the name. The MainImage is called "Original".

Fifth, Because you clicked a thumbnail image before you got the menu, the JavaScript created wiill be attached to that thumbnail. In the dialog box, click the main image. Then click brows and choose the image it should switch to when the mouse rolls over that thumbnail. (Of course, this image will be much easier to find if your files are well organized in your Images folder.) Click OK.

Sixth, after the dialog box closes, there should be two Behaviors showing in the Behaviors panel. Be sure that the Behaviors say onMouseOver and onMouseOut. Sometimes Dreamweaver will set it for onClick or onFocus. If it isn't set right click the word and switch it in the options available.

 

Seventh, do the same procedures for all the thumbnails.

 

Related Articles

1. Using a Text Editor and a Browser to Create a Web Page
2. What is JavaScript?
3. Using a Pre-defined Function in JavaScript
4. Variables, Math, Concatenation and Overloaded Operators
5. Using a Prompt Box and Outputting to the Screen
6. Basics about Forms
7. Adding JavaScript to a Form
8. JavaScript Rollover Images in Dreamweaver 8