Creating a simple rollover button in Firworks for my moodle site...

I have a rollover button that I am replacing in moodle, since I put date specific information in it.  Now, I need to remove the data specific information but it is in a animated gif that I created a while back in Fireworks.

I have messed around with creating a new animation like the one I am replacing, but seems too much work.  I am also experimenting with CSS/HTML buttons only, with a rollover, which is nice, but does not look as good as the actual buttons created in Fireworks.

So, these are my steps from creation to implementation.

1. open fireworks
2. create a new canvass(I choose 170 * 30 pixels) - not too big
3. using the image draw tool, draw a rounded rectangle in the canvass
4. trim the canvass, right click for shortcut
5. activate the Styles window
6. choose a style (included color, effect etc)
7. choose the text icon, click on the button, add a title to the button
8. activate the frame window
9. add a frame, duplicate the first frame
10. select the second frame
11. change the color of the text in the button title, that is a subtle rollover change
12. click back on frame 1
13. select the slice tool
14. select the image
15. right click the slice over the image
16. choose Add simple roll over behavior
17. save the image as buttonname.jpg
18. 
    
19. Once the image(s) are done, you must export them, along with the supporitng javascript that actually switches the images, into an html document.  
20.  
21. Open the html document and copy / paste the code into a php page if necessary.  Maybe you can leave the html in the page and use the html page itself in your design.  I already had a php page that was doing this work, so I copied and pasted the html and javascript created by Fireworks into the php page.

More to follow this incomplete post.