Macromedia Fireworks
Rollover Button Tutorial

Here i will be showing you how to make Rollover Buttons using Macromedia Fireworks
(like the ones to the right) which will have the rollover code for Dreamweaver & slices added automatically.
Seeing as it will automatically be a symbol you can make the first button
then add more using the same button by changing the text on each symbol.
If you don't want to use the Dreamweaver code i will put a link to a JavaScript code Generator at the end.


Ok lets start , open Fireworks click File then New.



Chose what Canvas Size/Color you are going to use.



Now click on the Rectangle tool icon then select the Rectangle tool.



Make yourself a Rectangle then using the pointer tool select the color you want the fill to be





Now do a stroke click on the color box select the color you want the stroke to be then make it 2 pixels



Now select the text icon then click somewhere inside the Button
you are making and type in the name of the Button.
Then use the pointer tool to move it where you want it on the Button.



Now select the type of font you would like the text to be (1) and the size of the text (2).
If you are only going to do one Button then you can resize the Button
to a little bit bigger than the text.(3)
(The size showen 105 is the text size i have changed the Button size to 110)



Now use the pointer tool and select all.



Then click Modify then Symbol then Convert to Symbol... F8 or just press F8 on your keyboard.



Now Name you Button then changed Symbol Type to Button then press OK.



This is a slice with a Button Symbol a slice is automatically added for you.



Now click the hide Slice icon so you can carry on



If you now want to make more Buttons press and hold down the Alt key
on your keyboard and right click on your Button and drag down a new Button.



Now double click the new Button you just made this will open the Button Editor.
This shows you the up state of your Button
(this is what you will see before you hover your Button).



Now click Over Tab then Copy Up Graphic this will then bring up the same Button but in an over state
(what you would see if you hover over a your Button)



Now to reverse the colors of your Button.
Click on the Button so you can see the same image Properties as below.
Change the color of your stroke for the color of the fill or *text.
Change the color of your fill for the old color of the stroke or the color of the *text.
(* if it is a different color).



Now click on the text.
Change the color of your text for the old color of the stroke or the old color of the fill.
(if you want to do a down state repeat the above)
Once you have chaged the colors click Done.



Now you have your rollovers click the Preview Tab and move the pointer over
your Buttons to see them change from the up state to the over state (and down state).



Now click the Original Tab , now click on the new Button you made.
Right now to change the text on the Button all you have to do is
change the text in the text box to what you want it to be and press enter.
The text on the Button has now changed





Right that's that bit done now to export the Buttons and generate the Dreamweaver Code.
Click File then Export.



Now select where you are going to put the code and images give it a File Name.
Make sure the rest is the same as the image below then just press Save.




JOB DONE ........ Unless you DON'T want to use the Dreamweaver Code.
If you DON'T go to the file where you saved the Buttons too and delete the
?????.htm file and the spacer.gif your not going to need them.
Now copy the rest to a folder on your site then goto the javascript Code Generator

Just in case you need help with that.....
Put the up state Button image/images url in #1, #2, and so on.
Then put the over state Button image/images url in MOI1, MOI2 and so on.
Put the page you want them to link to in URL1, URL2, and so on.
Finally press the " Done! Make My Script " button at the bottom.
The rest is easy just Cut and Paste.

If you found this tutorial useful please put a link to it somewhere on your site
so it can help other webmasters/site builders make there own Rollover Buttons .