Solved

Swap Image Behavior not working in Fireworks CS5

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to correct colors in Photoshop using the Hue and Saturation adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Hue and Saturat…

760 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

22 Experts available now in Live!

Get 1:1 Help Now