Cool rollover buttons and popup menus in Dreamweaver

Adding a rollover button to a web page 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 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 place white text that says ‘Home’ .

Next, you want to crop the canvas and export this image as a ‘home1.gif’ or ‘home1.jpg’ file. Export the image to the folder where your web pages are located so you can use it for your web page.

Then simply change the button text color to yellow and export that version as ‘home2.gif’

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

Simply place your cursor where you want the button on your web page and select ‘Insert’ > ‘Image Objects’ > ‘Dynamic Image’ from the Dreamweaver drop-down menu.

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

Another option is to use the popup menus feature. You can find this in the ‘tag inspector’ in Dreamweaver. You can use this to make some interesting looking popup menus that appear when you mouse over an image.

Leave a Reply