TechNote (Archived)

How to retain the button over state while scrolling over a Pop-up Menu

Pop-up Menus sometimes use rollover-type triggers that change when the mouse rolls over them and change back to the original state when the mouse rolls off;even to move over the Pop-up Menus themselves (see Example 1). You might prefer that the rollover-type triggers not change back to the original image while the mouse is over the Pop-up Menus (see Example 2). By modifying the HTML and JavaScript code, you can have this latter functionality. This TechNote describes how to accomplish this.

Background information on the Rollover behavior

In Fireworks, a simple rollover behavior swaps an image from frame 1 with an image on frame 2 and then restores the image to frame 1 on mouseout. One attribute of the "Simple Rollover" behavior is the MM_swapImageRestore function in the JavaScript that is enabled by the onMouseOut event. This function restores the button to frame 1 when the mouse is moved off the button. When a Pop-up Menu is added to the button, some users do not want the button to restore to the up state when they mouse over to the Pop-up Menu. To do this, they must remove the call to the restore function, declare a new parameter in the JavaScript, and pass that parameter to the fw_menu.js file which controls the behavior of the Pop-up Menus.

The steps for this procedure involve both Fireworks and Dreamweaver:

Step 1 (in Fireworks): creating and exporting the Fireworks Pop-up Menus

First create your Pop-up Menus in Fireworks and export the HTML and other file (this will include the fw_menu.js file) to your defined site in Dreamweaver. If you haven't defined a site, see How to define a site in Dreamweaver (TechNote tn_14028).

All other steps will occur in Dreamweaver:

Step 2: preparing Code View

Inserting the Fireworks HTML into a Dreamweaver document
It is recommended that you Insert the exported Fireworks HTML file into an already-saved Dreamweaver file. See Inserting a Fireworks Nav Bar into Dreamweaver (TechNote tn_15688).
Preparing the Code View
The examples in these steps use screen shots of source code. The source code appears without word wrap, but with line numbers. You can configure your own Code View to reflect the illustrations below to help you find certain locations in the source code.

Note: The images included in this TechNote are not long enough to include all of the code that will need to be changed. Look at the line numbers and the highlighted area to determine what needs to be changed.
- Deselect Word Wrap
  Choose View > Code View Options. In the Code View Options pop-up menu, deselect Word Wrap if it is selected.
- Select Line Numbers
  Choose View > Code View Options. If Line Numbers is not already selected, select it.
You may want to have both the HTML and the fw_menu.js file open for quick editing.

Step 3: Modifying the HTML and JavaScript files

Open the HTML file containing the Pop-up Menus. Choose View> Code to view the source code.
In the <HEAD> tag, locate function MM_swapImgRestore. This is one of four functions that are created by Fireworks when Pop-up Menus and simple rollover buttons are used. The image below will help you to locate these lines of code.
Select the lines of text for the function MM_swapImgRestore and then choose Edit > Cut.
Open the fw_menu.js file. Paste the code at the top of the JavaScript code. Your fw_menu.js file should look similar to the image below.

Select and copy the code below:

 fw_menu_$.restoreParam = 'restore_img.gif'

Paste the above copied code into the HTML document under the last menu item in the function fwLoadMenus() one line after the last fw_menu_# entry and two lines before the "fw_menu_#.writeMenus();" entry (see the illustration after step 7, below. The # in "fw_menu_#.writeMenus();" above and "fw_menu_#" is a placeholder for the number that occurs in that string. Do not change these numbers).
Replace the dollar sign ($) with the number that represents the number of buttons that you have on your page that have a Pop-up Menu attached to them minus one. Fireworks increments this code starting with zero (0). In the example below, there is only one button on the page that has a Pop-up Menu, so the number is zero (0). If you have 4 buttons on your page, the number would be three (3).

Note: If you have submenus, there will be an additional line of code under the last menu item that makes a call to the child menu icon. This is the little triangle graphic that is placed on menu items to let the user know that there are submenus for that menu item. Paste the above copied code under the call to the child menu icon.
Remove the "MM_swapImageRestore();" from the onMouseOut event for each button that has a Pop-up menu item. This event is the heart of the rollover event that returns the button to the Up state. This information is in the <BODY> of the HTML page.

Note: be sure to leave the open quote (") so that the remaining onMouseOut code looks like this: onMouseOut="FW_startTimeout();"
Save the HTML file.

Select and copy the code below:

 MM_swapImgRestore( activeMenus[i].Menu.restoreParam);

Paste the copied code in the fw_menu.js file in the location shown in the image below.
Save the changes to the fw_menu.js file.

Troubleshooting

If you follow the steps in this TechNote, the buttons will perform as expected. JavaScript is less tolerant of syntax errors than HTML. If you have a space in the code that is not supposed to be there, the code will break. The same is true for the placement of the code. The correct location of the JavaScript code is important since it is read in sequential order. If the information is not passed in the right order, you will get errors or unexpected results.

Note: To perform the operations in this TechNote, you should be familiar with HTML and JavaScript, and be able to use Dreamweaver's Code View with some facility. Macromedia Technical Support is not responsible for, and cannot offer support for, improperly coded HTML and JavaScript that may result from the incorrect implementation of this TechNote.

Additional information

For more information on adding behaviors or other ways to customize the pop-up menus, see the TechNotes listed below.

The commented fw_menu.js file (TechNote tn_15827)
Customizing and troubleshooting Pop-up Menu images (TechNote tn_14995)
How to set the length of time a Pop-up Menu remains visible (TechNote tn_15007)
Fireworks 4 Pop-up Menus in Dreamweaver 4 templates (TechNote tn_15088)
Fireworks Pop-up Menus in Dreamweaver Library files (TechNote tn_15101)
Using anchor tags with Fireworks 4 Pop-up Menus (TechNote tn_15161)
Assigning additional behaviors to Pop-up Menu items (TechNote tn_15369)
Multiple Pop-up Menu HTMLs inserted into one Dreamweaver file (TechNote tn_15573)
How to open Pop-up Menus in another frame panel (TechNote tn_15816)
Fonts in Pop-up Menus (TechNote tn_15342)
How to create transparent Pop-up Menus (TechNote tn_15526)
Using site root-relative paths with Fireworks Pop-up Menus in Dreamweaver Library files (TechNote tn_15899)
Using site root-relative paths with Fireworks Pop-up Menus in Dreamweaver templates (TechNote tn_15832)

Note: Aspects of the Pop-up Menu feature in Fireworks were improved in the Fireworks 4.0.2 Updater. See Fireworks 4 and 4.0.2 release notes for specific information about the updater.