TechNote (Archived)

Retain a button's rollover state while rolling over a pop-up menu

Issue

---

When the user moves the cursor over a button in a navigation menu in a web browser, the button swaps out the "up" state image and replaces it with the "over" state image. If there is a pop-up menu attached to the button and the user rolls over the pop-up menu, the button with the pop-up menu behavior then swaps back to the "up" state even though the pop-up menu is part of the button's behaviors.

Solution

---

This is how the pop-up menu code was designed to work. The solution, then, is a workaround that changes the JavaScript code used for the specific page you modify.

Note: If you are using Button Symbols with a down state, this technique will not work properly.

Modify the JavaScript by following the steps below:

1. Verify the code below is above the function mmLoadMenus()

    function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 

2. In Code view, find the image with the popup menu trigger and delete the swap image restore function call.
   
   Example:

    <tr><td><a href="#" onMouseOut="MM_swapImgRestore(); MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1129133027_0,69,33,null,'popup_r2_c1');MM_swapImage('popup_r2_c1','','images/popup_r2_c1_f2.jpg',1);"><img name="popup_r2_c1" href="images/popup_r2_c1.jpg"    ></a></td></tr> 

3. Copy and paste the code below into the last main menu item in the function mmLoadMenus()
   

    mm_menu_1129133027_0.restoreParam=''; 

   Note: The 10 digit number (1129133027) above needs to be the same number as the menu item in your code. This number is dynamically generated everytime you create a popup menu.
   
   Heres an example of the modified mmLoadMenus() function with one menu item:

    function mmLoadMenus() { if (window.mm_menu_1129133027_0) return; window.mm_menu_1129133027_0 = new Menu("root",90,18,"Verdana, Arial, Helvetica, sans serif",10,"#666666","#666666","#cccccc","#ffffff","center","middle",4,2,100, 5,7,true,true,true,0,false,true); mm_menu_1129133027_0.addMenuItem("Button 1","location='#'"); mm_menu_1129133027_0.addMenuItem("Button 2","location='#'"); mm_menu_1129133027_0.addMenuItem("Button 3","location='#'"); mm_menu_1129133027_0.addMenuItem("Button 4","location='#'"); mm_menu_1129133027_0.hideOnMouseOut=true; mm_menu_1129133027_0.menuBorder=1; mm_menu_1129133027_0.menuLiteBgColor='#cccccc'; mm_menu_1129133027_0.menuBorderBgColor='#cccccc'; mm_menu_1129133027_0.bgColor='#cccccc';mm_menu_1129133027_0.restoreParam=''; // New mm_menu_1129133027_0.writeMenus(); } // mmLoadMenus() 

4. Switch to the mm_menu.js file. Search for the function hideActiveMenus()". This function will be located in lines 730-740.
   
   Copy the code below:
   

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

   Paste the copied code into the function shown below:
   

    function hideActiveMenus() { if (!window.activeMenus) return; for (var i=0; i < window.activeMenus.length; i++) { if (!activeMenus[i]) continue; if (activeMenus[i].visibility && activeMenus[i].Menu && !window.mmIsOpera) { activeMenus[i].visibility = "hidden"; activeMenus[i].Menu.container.visibility = "hidden"; activeMenus[i].Menu.container.clip.left = 0; } else if (activeMenus[i].style) { var s = activeMenus[i].style; s.visibility = "hidden"; s.left = '-200px'; s.top = '-200px'; }MM_swapImgRestore(activeMenus[i].Menu.restoreParam); } if (window.ActiveMenuItem) hideMenu(false, false); window.activeMenus.length = 0; } 

5. Save changes to the mm_menu.js file.
   
6. Test your navigation menu in the browser and verify the button's "over" state is being retained when rolling over the pop up menus.

Search Support

---