Anylink drop down menu - linking to interactive button

[Di Di]

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: I am using FrontPage 2003 to set up an intranet site for my department. For the site navigation I am using "interactive buttons" so that the user clicks the buttons to hop from one page to another. I would like users to be able to mouse-over an interactive button and for a sub menu to appear as per the above script which links to individual pages for certain teams within the department. However, I cannot work out how to link the DD script to the interactive button. (I do not have technical IT skills, by the way, but I have found your site very useful and it has allowed me to make lots of progress despite this so many thanks!) Please could anyone help?

The code for the interactive button is as follows: <img border="0" id="img1" src="buttonB8.jpg" height="33" width="100" alt="Button Text" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonB9.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonB8.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonBA.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonB9.jpg')" fp-style="fp-btn: Metal Tab 5" fp-title="Button Text">

Thank you.

[ddadmin]

Basically, the key knowledge you need to possess is how to get one event handler (ie: onMouseover) to run more than 1 function simultaneously. The default anchor link for a drop down menu looks like this:


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a>

Notice the "onMouseover/ onMouseout" event handlers added inside the link. You want to transfer these event handlers into your button HTML code instead. Since that code also uses the "onMouseover/ onMouseout" event handlers, the key is to combine the codes that should be run inside each event handler. This is done by separating each code to run by a semicolon. You end up with something like the below:


<img border="0" id="img1" src="buttonB8.jpg" height="33" width="100" alt="Button Text" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonB9.jpg'); dropdownmenu(this, event, menu1, '150px')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonB8.jpg'); delayhidemenu()" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonBA.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonB9.jpg')" fp-style="fp-btn: Metal Tab 5" fp-title="Button Text">