Web Hosting

Creating rollover images in both Dreamweaver and Fireworks

by Luke Wildman in 29.07.2010 06:58

Firstly we will talk about creating rollover buttons in Dreamweaver; to be honest this is by far the easiest piece of software to use for creating rollover buttons for web sites.

To create your rollover firstly you will need to go into fireworks here you will need to create two images, your original button and the rollover, remember your rollover needs to be a different design to your original button! Once you have created your buttons export them to your web sites folder and load up Dreamweaver.

Once loaded create a new HTML page, now all you need to do is go to insert>image objects>rollover images, here you can select two images the original image and the rollover image obviously you know what to do here! It is a good idea to name your buttons for example if you a creating a navigation bar you could name the button "home button", "contact button" etc... then add alt text to help search engine read know what is in the image.

That's it! You have created a rollover image in Dreamweaver, how easy was that. However rollover images can be created in fireworks and even though it is not as straight forward it is another tool in the box!

Creating rollover images in Fireworks

The first step again is to load up Fireworks and create to graphics for your buttons. You will then need two frames, one frame should include the original image the other frame should include the rollover image.

Now using the slice tool to cover your graphic with a slice, these are normally a transparent green colour. You can the assign behaviours to the slice, to do this click on the slice then go to window>behaviours, in the behaviours pop up you can select simple rollover, do this!

Export the slice as HTML and images you can then use this rollover button for anything you desire!

For further help make sure to go visit our where we have loads of quality information!

Rating: