How to create a Disjointed Rollover in Dreamweaver

One of the most popular effects on the web is the disjointed rollover. An image, or multiple images, on the page changes when the cursor rolls over another image—the image that swaps-out.

The Rollover effect is accomplished with the JavaScript Action Swap Image and mouseOver Event. An original or place-holder image is swapped-out for a new image when the user rolls over the initiating image—the trigger.

The example below is a four cell table containing two text images. The Swap Image Behavior is assigned to the first image. The second image is swapped-out.

 
 

Create a disjointed rollover Swap Image effect
Assign a Behavior that will change an image when the user rolls over the trigger.

1

In turn, select each image on the page, name each one in the Property Inspector.
 

2

Select the trigger image, go to Window > Behaviors

3

Click the plus (+) sign to add a Behavior
 

4

Select Swap Image from the drop-down menu that appears.
5

A list of all the images on the page will appear in the dialog box that opens.

By default, the image you have selected will be highlighted. Instead, highlight the image you want to swap-out.
 

 

Tip: At this point the importance of naming your images is apparent.
 

6

Click the Browse button and browse to the image you want to appear in place of the original place holder.
7

Click OK.

Tip: You have just created the JavaScript Action called Swap Image. The plan is to cause this Action by the JavaScript Event of rollover. However, Dreamweaver chooses a default Event depending on the browser your are targeting. Usually it is preferred, but it is a good idea to check the Event to ensure it is what you want.

If the Event should be other than onMouseOver, pull down the drop-down menu to the right of the Event and select onMouseOver.

To check the Event of the Behavior: Select the trigger image, go to the Behaviors window, the Behavior will be highlighted.

Tip: The drop-down menu will be available when the Behavior is highlighted.
 

Here are variations on the Disjointed Rollover Swap-Image Behavior.
 
Bullet

One image swaps-out multiple images at the same time.
 
a

Repeat steps 1 through 7 above.
b

Repeat steps 1 through 7 for each image to swap-out.

Tip: Review Step 5, select the image will be replaced by the Event.
c

After browsing to each swap-out image. Click OK.

 
Bullet

Add several Swap-Image Behaviors to one trigger.

Assign multiple JavaScript Actions to one trigger, caused by different JavaScript Events.

 
a

Repeat steps 1 through 7 above.
b

Repeat steps 1 through 7 for each image to swap-out.
c

After browsing to each swap-out image. Click OK.

Tip: Review Step 7, select the Event which will cause the Swap Image.

8

Test in browsers.

Tip: To edit the Behavior, select the trigger and the Behavior will appear in the Behavior panel, double-click on the Behavior. Reset as desired. Test in browsers.
 

 

Here are samples of disjointed rollovers. Click on the listing below to see sample pages.

A single disjointed rollover.

One rollover swaps-out multiple images on the page at the same time.

Different Actions caused by the JavaScript Events: onMouseOver, onClick, onDoubleClick.
 

 

Resources

How to create a disjointed rollover button in Fireworks

Using Behaviors

Using the Swap Image Restore behavior when swapping multiple images

 

1