Solved

Swap Image Behavior not working in Fireworks CS5

Posted on 2010-11-19
5
1,550 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
  • 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 125 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Adobe Creative Cloud 2 183
Adobe Captivate - Example files 2 88
Wordpress/Dreamweaver Did we get lied to when they created our website? 9 65
Video Overlay Banners 2 58
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
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 create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …

930 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now