?
Solved

Swap Image Behavior not working in Fireworks CS5

Posted on 2010-11-19
5
Medium Priority
?
1,594 Views
Last Modified: 2012-05-10
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
Comment
Question by:ochness
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:glenn_1984
ID: 34178457
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
 
LVL 1

Author Comment

by:ochness
ID: 34189325
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
 
LVL 1

Author Comment

by:ochness
ID: 34189422
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
 
LVL 16

Accepted Solution

by:
glenn_1984 earned 500 total points
ID: 34191053
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
 
LVL 1

Author Closing Comment

by:ochness
ID: 34192601
Glenn thank you very much for this. It works fine now after I redid it following your directions.

Thanks again....
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The ability to automatically add page numbers to a layout is one of the many easy, convenient features InDesign has to offer. There are many reasons why you would want to automatically generate page numbers in your next project, so whether it’s a ma…
You can download the files for this tutorial here (https://www.dropbox.com/s/hgztzt9b60kddc9/DPS%20Demo.zip?dl=0). The .indd file in the InDesign files folder is a finished version of the file; you can start from scratch and work toward this. Also, …
In this tutorial viewers will learn how to correct colors in Photoshop using the Curves adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Curves: Select "OK" on the …
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
Suggested Courses
Course of the Month8 days, 10 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question