How do I create simple rollover buttons in Fireworks?

In the past, I only had Photoshop and ImageReady.  I found creating rollover effects and buttons incredibly simple in there.  Now I have CS3 Web Premium and I'm completely failing to do the same thing in the supposedly more advanced Fireworks.  What I have so far is a .png with three rectangles that are different colors in different frames.  What I need to do is make those rectangles into rollovers.  Unfortunately, whenever I try to add this behavior, I get no results.  So, I'm turning to you, friends.  I have attached the .png file.  I'm assuming all of the frames will be preserved from my machine to yours.  If you know how to do it, I'm ready to learn!
masthead3-UPLOAD.png
mrcoulsonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pr0t0c0l12Commented:
In Fireworks you have to use the Behavior palette to create rollover buttons.

Again the first step is to design your images and rollovers in Fireworks. Make sure your rollovers are in the exact same place as your rollovers. Put your images in one layer and your rollovers in another.
Now you need 2 frames. Frame 1 should have the actual images and frame 2 should have the rollover images.
Insert slices on each of the images (Insert>Slice) and name it appropriately for easy reference.
Click on the slice and go to Window>Behaviors.
Now click on the '+' button and choose Simple Rollover.
Click on OK
Repeat the behavior steps for each of the slices.
The last step is to export the file. Fireworks will automatically convert the rollovers to javascript and html. You don't have do any programming, its automatically done for you when you export the file. You just need to focus on the design and Fireworks takes care of all the boring programming for you. When you export the file there are two things you need to remember to do:
Under slicing you need to choose 'Use slice objects'
Under HTML style choose Dreamweaver 2.0 (or 3.0)
Fireworks will export a .htm file to the directory you have specified (along with the images). Browse the .htm file from IE or Netscape and you'll see your swap images working beautifully.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mrcoulsonAuthor Commented:
This method exports a messy table.  I thought I would be able to do this with just a .png sort of like how a .png can be animated.  When I drop the table onto the page, I'm left with funny margins around everything because of the table.  Is there a non-tables way to do it?
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

mrcoulsonAuthor Commented:
Check out the image.  This is from IE 6.  On the right, there is a sliver of emptiness and on the left, the navigation box pokes up into the masthead.
untitled.jpg
0
mrcoulsonAuthor Commented:
I managed to fix the left hand navigation problem in everything except IE 6.  I positioned another page element so the masthead would stick to the top of the page and then I added a padding to it so it would come back down to where it had been:

#mastheadMenuHolder{padding-top:17px;}
<!--[if IE 6]>#mastheadMenuHolder{padding-top:170px;}<![endif]-->

Unfortunately, that conditional thing seems to do nothing in IE 6.  Darn.
0
mrcoulsonAuthor Commented:
Okay, now I just need to correct the sliver of empty space on the right side.  I added a style just for IE that puts that leftNavBox 100 places below everything else.  Probably overkill, but I chose a high number on purpose:

<style type="text/css">
td img {display: block;}
#mastheadMenuHolder{padding-top:17px;}
</style>
<!--[if IE]>
<style type="text/css">
#leftNavBox{z-index:-100;}
</style>
<![endif]-->

Now, how about that empty space on the right?
0
mrcoulsonAuthor Commented:
If it helps, the code is at http://www.co.frederick.va.us/dry_dock/default-test.aspx.

I'm not really using red for that nav box.  It's just there to make it stand out while I put this thing back together.
0
mrcoulsonAuthor Commented:
Got it!  Solution: I removed the final spacer td from each tr.  This seems to make IE 6 happy and doesn't have any effect on other browsers.  Whew.

Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Graphics Software

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.