Results 1 to 2 of 2

Thread: Anylink drop down menu - linking to interactive button

  1. #1
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Anylink drop down menu - linking to interactive button

    1) Script Title: AnyLink Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.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.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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:

    Code:
    <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">

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •