Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Descriptive Menu? 1

Status
Not open for further replies.

chinaski

Programmer
Jul 18, 2001
4
US
Until this weekend I'd never messed with Fireworks. I am trying to create a menu much like the one on the right hand side of the University of Virginia's home page ( I'm trying to figure out how they get the desription of the button over which one is hovering. I think it looks pretty cool and would love to know how they did it.

If anyone knows a place that might have a tutorial similiar to this, please let me know.

All help is genuinely appreciated.
 
Hey chinaski,

This can be done fairly easier in Fireworks. You will need to become familiar with Frames, Slices, and the Swap Image Behavior.

First you will need to create your graphics for the nav bar.

Next, you will draw a slice around each link in the nav bar using the slice tool (knife at botto of tools). Also draw a slice in the area you would like the description to go.

Next, create additional Frames. Window>Frames will bring up the Frames Pallette. From there click the arrow to the right of the pallette and select Add additional Frames> After Current Frame. You will need to add a frame for Every Link you want to have a text description for.

In Frame 2 through whatever, create short descriptions of your Links, one in each frame, within the area you have sliced for the description.

Now go back to Frame 1 and make sure the web Layer is on (can see the green slices). Select one of the Link slices. Open the Behaviors Pallette. Window>Behaviors. Click on the Plus Button and select Swap Image. This will bring up a swap image dialog box with gray and blue boxes to the right representing the slices you have created. Select the slice you have created for the description. For the Frame #, select the Frame which contains the appropriate description for this particular link.

Continue adding The Swap Image Behavior to every Link Slice you wish to have a description for.

This should do it. If this is confusing, let me know, I can email you a png file as an example if necessary.

Tim
 
Hey Tim,

Thanks for the detailed instructions. I'm sure for most people they would work fine. But, being new to Fireworks, I'm having a tough time getting it to work. You mentioned a sample .png file you could email. I hate to cheat, but have become very frustrated and need some help. If you could send the sample to illya@intrepid.net you may save my hair from being ripped from my head.

Thanks,

Illya
 
Hey Illya,
Just sent a quick example png. Let me know when you get it and if it helps any.
Tim
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top