Q "I goofed and exported my graphics as CSS slices and no code. How do I turn them into disjoint rollovers in Dreamweaver?" --G.L.

Go ahead and mouse over the buttons on the left to see how the rollovers function.

Step 1: Insert the first normal state button either by clicking on the image icon in the object panel, or using Insert > Image from the Insert menu.

In the property inspector, give your button graphic a unique name. As you can see in this screen shot, the unique name (buttontop) is different than the name of the GIF.

Step 2:    Insert the rest of your normal state button images. I have also inserted a blank or dummy image as a kind of place holder where the disjoint rollovers will be (the text images in my example) and given it the unique name,"blanktext."

NOTE: for the image swaps to function properly, it is necessary for each pair of button state images and each pair of disjoint rollover state images to have the same dimensions.

Step 3:  Click on the first button you wish to swap (the top one in my example) then on the [+] button in the behaviors panel.

Choose Swap Image from the fly out menu.

Step 4:   A dialog box containing a list of your normal state images will open. Make sure both Preload Images and Restore Images onMouseOut are checked.

Without clicking O.K., which would close the dialog box, scroll to the unique name of the image that represents the normal state of your disjoint rollover and highlight it. In my screen shot it is the top one, "blanktext". Browse to the image that gets swapped for the blank one on mouse over. Now you can click O.K.

Step 5:  Repeat the same steps for the rest of your buttons.

If your buttons will be used to link to another page of your site, simply click on them and add the URL in the usual way.

Back to top