Results 1 to 4 of 4

Thread: AnyLink Drop Down Menu - Position problems

  1. #1
    Join Date
    Dec 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Drop Down Menu - Position problems

    AnyLink Drop Down Menu
    http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    I really want the menu to expand directly below the link.

    For some reason it appears to the left of the link. Seen here by mousing over the 'Golf' square:
    http://www.prowebmarketing.com/agaming/

    Thanks in advance for help on this!

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

    Default

    Hi:
    The reason it doesn't work as expected is because you're using this script inside an image map, so the script does not know where exactly to drop down relative to the "hot" zone. In your case, modify the script as follows to correctly drop down beneath the Golf square:

    1) Replace function dropdownmenu() inside the code of Step 1 with the below version instead:

    Code:
    function dropdownmenu(obj, e, menucontents, menuwidth){
    var offsetfrommap=parseInt(obj.coords)
    var obj=document.getElementById("mainimage") //change obj parameter to reference image map img instead
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+offsetfrommap+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }
    
    return clickreturnvalue()
    }
    2), Then, modify your HTML to give the image used by the image map an ID:

    Code:
    <IMG id="mainimage" height=321 
          src="client_files/photo_home.jpg" width=703 useMap=#photo_home 
      border=0>
    That's it.

  3. #3
    Join Date
    Dec 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Wow! Thanks! One question though....

    Thank you so much for the answer!

    I plan on having a drop down menu for each of the (4) squares.

    One for the 'Golf' square and the other (3) square areas.

    Is that possible with the current code?

    Thanks again!! (:

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

    Default

    Yes it should work, assuming the onMouseover part is added to the <area> tag of each square. If it doesn't work, just post here again.

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
  •