Fireworks: Creating Navigational Graphics

		Introduction
		Outline
		Examples
		FAQs

	Our Project

		Understanding Navbars
		Using Frames
		Create Document

	Up State Graphics

		Text Labels
		Align/Distribute

	Over State Graphics

		Duplicate Up State
		Indicators
		Create Symbol
		Edit Symbol

	Down State Graphics

		Duplicate Over State
		Change Indicators
		Navbar Summary

	Slicing

		Introduction
		Create Slices
		Slice Properties
		Optimizing
		Assign Behaviors

	Intelligent Navbar

		Examples
		Macromedia Standard Behavior

	Integrate with DW

		File Management
		Export Parameters
		Export the Navbar
		Importing to DW

	Also See

		FW: Introduction
		FW: Images/Photos
		Purchase Fireworks

Macromedia nav-bar behavior

The predefined Macromedia nav bar behavior works well when the nav bar stays within a frame. Unfortunately frames create more problems than advantages and we at Boston University discourage the use of frames.

In order to solve the problem that the navigation has to be indicated when a page is loaded I created the intelligent nav bar.

The JavaScript that makes it work

Here is the code that makes it work.

function eval_location() { // ascertain the document location var here=new String(document.location);

// work through the keywords and test if one is in the location for (i=0;i<mkeys.length;i++){

if (here.indexOf(mkeys[i])>-1) { // get the path from the selected image path=new String(document.images['l2'+mkeys[i]].src);

// extract the path to the appropriate graphics folder path = path.substring(0,path.lastIndexOf("/")+1);

MM_nbGroup('down','navbar1','l2'+mkeys[i],path+'l2-'+mkeys[i]+'-d.gif',1); break; } } return; }

The above function is called in the <body onLoad="eval_location();"> tag of the template.

You do not have to understand how it works to use it. I actually have integrated the little program into your template in the practice site. The nav bar will work as an intelligent nav bar.

The tutorial template already includes a definition of all navigational items in a JavaScript array. The JavaScript code compares the defined keywords with the actual URL displayed and sets the corresponding graphic to the down state. Here is what the definition of the navigational items looks like:

var mkeys = Array('about','courses','faculty','programs','contact');

If you want to use this code in your site you also need to supply the definition of the keywords.

NIS | OIT | Boston University | October 24, 2002