How to Create a Disjointed Rollover

Save

A disjointed rollover is a button that swaps from one image to another on a web page when your mouse rolls over it or clicks on it. You can specify how the disjointed rollover button functions and point people to a specific link. Creating the code for a disjointed rollover can be time consuming, but you don't have to create it yourself. Programs like Fireworks and Dreamweaver can help you create disjointed rollovers more quickly and easily.

Things You'll Need

  • Your favorite image editor and Dreamweaver

Creating the Disjointed Rollover Images

  • Create the disjointed rollover images in your favorite image editing software.

  • Make two buttons: one that displays your disjointed rollover button in normal state (when there's no mouseover effect), and one that displays during the mouseover effect (when someone rolls over the image or clicks on it).

  • Change the color and text of the two disjointed rollover buttons, but keep them the same size. Once you are satisfied with how they look, save each as web-friendly image files in .jpg, .gif or .png format.

  • Create any additional images you want to use for disjointed rollover buttons.

Putting the Disjointed Rollovers Into Action

  • Open your HTML document in Dreamweaver. Click in the area where you'd like to add the disjointed rollover image to appear.

  • Select "Insert, Image" from the toolbar to insert your image into your Dreamweaver page. Find the image you want to use in the "Select Image Source" dialog box and double-click it. This will be the image of your disjointed rollover in normal state. Add an alternate text and long description for the image (optional) and click "OK."

  • Go to the "Properties" window and name to your image in the name box, so you can point to the image more easily when you set up its behavior (how the disjointed rollover functions on the web).

  • Add any additional images you want to use and repeat Step 3 to name the images.

  • Open your right panel if it's hidden by hitting F4 or by clicking on the scrollbar's arrow for the panel. Select the "Behaviors" panel to open it.

  • Click on the "Add Behavior" button or plus sign to open it. Choose "Swap Image" from the drop-down list.

  • Select the first image you want to swap from the list and click on "Browse." Navigate to find the second image you created in "Section 1, Step 3" and open it. Leave "preload image" and "restore images on mouseout" checked unless you want to set them manually.

  • Set specific rollover states to the image by clicking on the drop-down box beside "Swap Image" or "Swap Image Rollover" or leave them as is.

  • Repeat Steps 6 to 8 for any additional disjointed rollover images you want to create.

  • Save your web page in Dreamweaver and preview it in your web browser. Then, test out your disjointed rollover button to see how it works. Congratulations! You've just created a disjointed rollover button.

References

Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!