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 webpages 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!
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.