Cool Rollover Buttons & Pop-up Menus in Dreamweaver

Nov 20, 2006 • By • 12,390 Views

Adding a rollover button to a webpage with Dreamweaver is a really simple task...if you have the button images ready to go.

If you don't have the images yet, here's what you need to do: Open a graphic design program like Fireworks or Photoshop and create a rectangle with a solid fill (for this example, blue) and then put some white text on it that says 'Home'.

Next you want to trim the canvas and export this image as something like 'home1.gif' or 'home1.jpg' file. Export the image to the folder where your web pages are so that you can use it for your webpage.

Next, simply change the color of the text on the button to yellow, and export that version as 'home2.gif'

Once you have these 2 images, creating a rollover button in Dreamweaver is cake because Dreamweaver does it all for you.

Simply place the cursor where you want the button on your webpage and choose 'Insert' > 'Image Objects' > 'Rollover Image' from the Dreamweaver dropdown menu.

Then use home1.gif for up image and home2.gif for the over image. Once you click ok, Dreamweaver will create all the necessary code for you. Then you need simply to upload the images and the page to your website!

These types of buttons can quickly and easily make your website look more professional.

Rollover buttons are one of the standards of website design, and now you too can use them.

Another option is to use the pop-up menus feature. You can find this under the 'tag inspector' in Dreamweaver. You can use this to make some exciting looking pop-up menus that appear when you put your mouse over an image.

This allows for multiple links to show up when you move your mouse over an image, and can be used to create vertical or horizontal sub-menus, which are used by some of the most popular and professional sites online.

To learn how to do all this and see it in action via step by step videos, head on over to: now.

About the Author

Jay Gilbert Jay Gilbert

Jay Gilbert offers step by step guides for people who want to sell info products online. Sign up for the free Dreamweaver tips training...

Reader Comments