Solved

How do I create simple rollover buttons in Fireworks?

Posted on 2008-11-01
8
1,395 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
  • 6
  • 2
8 Comments
 
LVL 7

Expert Comment

by:pr0t0c0l12
ID: 22860003
0
 
LVL 7

Accepted Solution

by:
pr0t0c0l12 earned 500 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
 

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
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.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
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…
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…
It’s easy to embed any of your public Prezi presentations on your website or social network to share with others. Learn how simple it is in this tutorial.

706 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

14 Experts available now in Live!

Get 1:1 Help Now