Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1654
  • Last Modified:

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.
0
ochness
Asked:
ochness
  • 3
  • 2
1 Solution
 
glenn_1984Commented:
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/
0
 
ochnessAuthor Commented:
Glenn,

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

Thanks.....
Layout.png
0
 
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.
Layout-bad-rollover.png
0
 
glenn_1984Commented:
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.
test.png
0
 
ochnessAuthor Commented:
Glenn thank you very much for this. It works fine now after I redid it following your directions.

Thanks again....
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now