1 Reply Latest reply on May 13, 2010 10:19 PM by pixlor

    making a menu


      I have created and exported a menu bar into my site that works perfectly. The menu consists of a series of rollover buttons and cosmetic images. As I said the menu works as it should, the only thing I can't figure out is how to make the button of the active page stay in its down state. In the script that gets exported with the images, there are onmouseover and onmouseout attributes associated with each button. Is there a way to add an onclick or something to make the selected button stay in the down state?  Here is the html for the menu that got generated:


      <div style="background-color:#ffffff; width:985px;" onload="MM_preloadImages('playbox%20menu_r1_c1_f2.jpg','playbox%20menu_r1_c2_f2.jpg','pla ybox%20menu_r1_c3_f2.jpg','playbox%20menu_r1_c4_f2.jpg','playbox%20menu_r1_c5_f2.jpg','pla ybox%20menu_r1_c6_f2.jpg');">
                      <table border="0" cellpadding="0" cellspacing="0" width="985">
                                 <td><img src="spacer.gif" width="109" height="1" border="0" alt="" /></td>
                                 <td><img src="spacer.gif" width="109" height="1" border="0" alt="" /></td>
                                 <td><img src="spacer.gif" width="109" height="1" border="0" alt="" /></td>
                                 <td><img src="spacer.gif" width="109" height="1" border="0" alt="" /></td>
                                 <td><img src="spacer.gif" width="109" height="1" border="0" alt="" /></td>
                                 <td><img src="spacer.gif" width="108" height="1" border="0" alt="" /></td>
                                 <td><img src="spacer.gif" width="332" height="1" border="0" alt="" /></td>
                                 <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
                                 <td><a href="http://playboxarenas.com/index.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('playboxmenu_r1_c1','','playbox%20menu_r1_c1_f2.jpg',1);"><img name="playboxmenu_r1_c1" src="playbox%20menu_r1_c1.jpg" width="109" height="40" border="0" id="playboxmenu_r1_c1" alt="" /></a></td>
                                 <td><a href="http://playboxarenas.com/index.php?action=myportal" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('playboxmenu_r1_c2','','playbox%20menu_r1_c2_f2.jpg',1);"><img name="playboxmenu_r1_c2" src="playbox%20menu_r1_c2.jpg" width="109" height="40" border="0" id="playboxmenu_r1_c2" alt="" /></a></td>
                                 <td><a href="http://playboxarenas.com/ladders.php?platform=1" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('playboxmenu_r1_c3','','playbox%20menu_r1_c3_f2.jpg',1);"><img name="playboxmenu_r1_c3" src="playbox%20menu_r1_c3.jpg" width="109" height="40" border="0" id="playboxmenu_r1_c3" alt="" /></a></td>
                                 <td><a href="http://playboxarenas.com/ladders.php?platform=2" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('playboxmenu_r1_c4','','playbox%20menu_r1_c4_f2.jpg',1);"><img name="playboxmenu_r1_c4" src="playbox%20menu_r1_c4.jpg" width="109" height="40" border="0" id="playboxmenu_r1_c4" alt="" /></a></td>
                                 <td><a href="http://playboxarenas.com/faqs.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('playboxmenu_r1_c5','','playbox%20menu_r1_c5_f2.jpg',1);"><img name="playboxmenu_r1_c5" src="playbox%20menu_r1_c5.jpg" width="109" height="40" border="0" id="playboxmenu_r1_c5" alt="" /></a></td>
                                 <td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('playboxmenu_r1_c6','','playbox%20menu_r1_c6_f2.jpg',1);"><img name="playboxmenu_r1_c6" src="playbox%20menu_r1_c6.jpg" width="108" height="40" border="0" id="playboxmenu_r1_c6" alt="" /></a></td>
                                 <div style="float:right;height:40px;background:url(/playbox%20menu_r1_c7.jpg) no-repeat;"></div>
                                 <td><img src="spacer.gif" width="1" height="40" border="0" alt="" /></td>
                  </div><!end menu-->


      Any suggestions from all of you seasoned vets out there?

        • 1. Re: making a menu
          pixlor Level 4

          The seasoned vets will all tell you not to use a graphics program to write your code for you.


          Fireworks is, basically, a graphics program. Even if its code did exactly what you want, it is better to create fresh code, either in a program that is designed for writing code (such as Dreamweaver) or write it by hand. That, or buy a professional menu system (such as from Project VII).


          If you want the button to stay down when you have the drop down open, what event restores it? That code will have to be written, and the proper conditions that fire it will have to be added. Is it a timer? If you mouse over some other active element? You'd have to think that out carefully, otherwise all your buttons will soon be in their down states and then what?