Swap Image Behavior not working in Fireworks CS5

I am new to using the Fireworks product from Adobe to layout a website design. I am using Fireworks CS5 and will be using Dreamweaver CS5 when I export my data as a CSS.

Here is my question/issue; I have created navigation buttons from images using the Convert to Symbol function in Fireworks. I then use the Add Swap Image Behavior funtion to add the second or "rollover" image. When I use F12 to preview the page in a web browser and mouse over the nav buttons the rollover image is all squished and aobut a 1/4 of the size that it should be. I'm not sure why this is happening. The two images (the up image and rollover image) were created at the same time in photoshop and are the size, font, and all that good stuff.

Any suggestions on what might be going on and how to fix it would be great. Thanks in advance.
Who is Participating?
glenn_1984Connect With a Mentor Commented:
The image squish could be caused by resizing a raster graphic (Photoshop) without properly keeping the ratio aspect.  

I could not see your rollover, however.  Mouse over just made the original vanish.

I created some text in FW CS5 (did not convert to symbol) and followed the instructions  below from FW Help.  It works fine.  My png is also attached.

Create and attach a simple rollover

A simple rollover swaps in the state directly under the top state and involves only one slice.

Ensure that the trigger object is not on a shared layer.
Select Edit > Insert > Rectangular Slice or Polygon Slice to create a slice on top of the trigger object.
Create a new state in the States panel by clicking the New/Duplicate State button.
Create, paste, or import an image to use as the swap image on the new state.
Position the image beneath the slice you created in step 2. Although you are in state 2, the slice is visible.
Select State 1 in the States panel to return to the state that has the original image.
Select the slice and place the pointer over the behavior handle.

Note: You can select the slice while in any state.
Click the behavior handle and select Add Simple Rollover Behavior from the menu.
Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser.
Can you send me the png?  I may not get to it for a day or two, however.
Also, you can create the graphics in Fireworks and then create the rollover in Dreamweaver, which is how I usually do it.

The NEW way, however, is CSS Sprites:  http://css-tricks.com/css-sprites/
ochnessAuthor Commented:

Here is the png file that I am woring on...any thoughts or tips to help me fix the issue would be great.

ochnessAuthor Commented:
Oops...sorry, I posted the wrong png file. The one I posted is a test page I was doing some different testing on....here is the correct file that has the bad rollover images on it for the navigation.

Thanks for your help.
ochnessAuthor Commented:
Glenn thank you very much for this. It works fine now after I redid it following your directions.

Thanks again....
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.

All Courses

From novice to tech pro — start learning today.