?
Solved

How do I create simple rollover buttons in Fireworks?

Posted on 2008-11-01
8
Medium Priority
?
1,404 Views
Last Modified: 2013-12-13
In the past, I only had Photoshop and ImageReady.  I found creating rollover effects and buttons incredibly simple in there.  Now I have CS3 Web Premium and I'm completely failing to do the same thing in the supposedly more advanced Fireworks.  What I have so far is a .png with three rectangles that are different colors in different frames.  What I need to do is make those rectangles into rollovers.  Unfortunately, whenever I try to add this behavior, I get no results.  So, I'm turning to you, friends.  I have attached the .png file.  I'm assuming all of the frames will be preserved from my machine to yours.  If you know how to do it, I'm ready to learn!
masthead3-UPLOAD.png
0
Comment
Question by:mrcoulson
[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
  • 6
  • 2
8 Comments
 
LVL 7

Expert Comment

by:pr0t0c0l12
ID: 22860003
0
 
LVL 7

Accepted Solution

by:
pr0t0c0l12 earned 2000 total points
ID: 22860007
In Fireworks you have to use the Behavior palette to create rollover buttons.

Again the first step is to design your images and rollovers in Fireworks. Make sure your rollovers are in the exact same place as your rollovers. Put your images in one layer and your rollovers in another.
Now you need 2 frames. Frame 1 should have the actual images and frame 2 should have the rollover images.
Insert slices on each of the images (Insert>Slice) and name it appropriately for easy reference.
Click on the slice and go to Window>Behaviors.
Now click on the '+' button and choose Simple Rollover.
Click on OK
Repeat the behavior steps for each of the slices.
The last step is to export the file. Fireworks will automatically convert the rollovers to javascript and html. You don't have do any programming, its automatically done for you when you export the file. You just need to focus on the design and Fireworks takes care of all the boring programming for you. When you export the file there are two things you need to remember to do:
Under slicing you need to choose 'Use slice objects'
Under HTML style choose Dreamweaver 2.0 (or 3.0)
Fireworks will export a .htm file to the directory you have specified (along with the images). Browse the .htm file from IE or Netscape and you'll see your swap images working beautifully.
0
 

Author Comment

by:mrcoulson
ID: 22860176
This method exports a messy table.  I thought I would be able to do this with just a .png sort of like how a .png can be animated.  When I drop the table onto the page, I'm left with funny margins around everything because of the table.  Is there a non-tables way to do it?
0
New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

 

Author Comment

by:mrcoulson
ID: 22860194
Check out the image.  This is from IE 6.  On the right, there is a sliver of emptiness and on the left, the navigation box pokes up into the masthead.
untitled.jpg
0
 

Author Comment

by:mrcoulson
ID: 22860225
I managed to fix the left hand navigation problem in everything except IE 6.  I positioned another page element so the masthead would stick to the top of the page and then I added a padding to it so it would come back down to where it had been:

#mastheadMenuHolder{padding-top:17px;}
<!--[if IE 6]>#mastheadMenuHolder{padding-top:170px;}<![endif]-->

Unfortunately, that conditional thing seems to do nothing in IE 6.  Darn.
0
 

Author Comment

by:mrcoulson
ID: 22860252
Okay, now I just need to correct the sliver of empty space on the right side.  I added a style just for IE that puts that leftNavBox 100 places below everything else.  Probably overkill, but I chose a high number on purpose:

<style type="text/css">
td img {display: block;}
#mastheadMenuHolder{padding-top:17px;}
</style>
<!--[if IE]>
<style type="text/css">
#leftNavBox{z-index:-100;}
</style>
<![endif]-->

Now, how about that empty space on the right?
0
 

Author Comment

by:mrcoulson
ID: 22860266
If it helps, the code is at http://www.co.frederick.va.us/dry_dock/default-test.aspx.

I'm not really using red for that nav box.  It's just there to make it stand out while I put this thing back together.
0
 

Author Comment

by:mrcoulson
ID: 22860289
Got it!  Solution: I removed the final spacer td from each tr.  This seems to make IE 6 happy and doesn't have any effect on other browsers.  Whew.

Thanks!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
Suggested Courses
Course of the Month11 days, 16 hours left to enroll

752 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