Results 1 to 10 of 10

Thread: Rollover Image for 'AnyLink Drop Down Menu'

  1. #1
    Join Date
    Apr 2008
    Posts
    32
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default Rollover Image for 'AnyLink Drop Down Menu'

    1) Script Title: AnyLink Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    3) Describe problem: The drop down menu works great on my site, and wanted to enhance it slightly by putting a Rollover for the image that drops the links. This also works great, however, when you 'mouseout' / scroll down the menu links, I loose the Rollover, as it 'restores the image'. Can anyone help with the code as to how I might achieve this! Here is my code:

    Code:
    <a href="who.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('who_button','','images/who_over.jpg',1), dropdownmenu(this, event, menu1, '150px')"><img src="images/who_button.jpg" name="who_button" width="104" height="27" border="0" onClick="return clickreturnvalue()" onMouseout="delayhidemenu()"></a>
    I realize that probably the 'onMouseOut="MM_swapImgRestore()" is where i'm loosing it, but I have no idea what to replace it with?? I appreciate any help. Thanks.

    Mike
    Last edited by jscheuer1; 04-29-2008 at 06:34 AM. Reason: add code tags

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Have you tried it like this:
    Code:
    <a href="who.html" onMouseOut="MM_swapImgRestore();delayhidemenu()" onMouseOver="MM_swapImage('who_button','','images/who_over.jpg',1);opdownmenu(this, event, menu1, '150px')"><img src="images/who_button.jpg" name="who_button" width="104" height="27" border="0" onClick="return clickreturnvalue()"></a>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <a href="who.html" onmouseout="MM_swapImgRestore();delayhidemenu();" 
    onclick="return clickreturnvalue();"
    onmouseover="MM_swapImage('who_button','','images/who_over.jpg',1);
    dropdownmenu(this, event, menu1, '150px');"><img 
    src="images/who_button.jpg" name="who_button" width="104" height="27" border="0"></a>
    If you want the link to also fire as a normal link, don't use the highlighted onclick at all.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2008
    Posts
    32
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Thanks for the quick answers, but unfortunately it is still losing the rollover image when you scroll down the menu... any other suggestions??

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I misunderstood the question. Gotta run now. But I imagine if you edited the script to do the:

    Code:
    MM_swapImgRestore()
    in its:

    Code:
    function hidemenu(e){
    MM_swapImgRestore();
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    function, as shown (addition red), it could work out. You would of course also have to remove it (highlighted) from the link's onmouseout:

    Code:
    onmouseout="MM_swapImgRestore();delayhidemenu();"
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2008
    Posts
    32
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    John, (and other readers) --

    Perhaps I should clarify my question so I don't waste too much of your time.
    When the user mouses over the link/image -- a roll over image appears, and the drop down menu opens. I would like the roll over image to remain when the user scrolls down the menu, as in a 'selected state'... And then over course restore itself when the user navigates away from the menu. Thanks in advance.

    Mike

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Did you try my suggestion? It is designed to do you as you say, untested of course, I was in a rush when I wrote as I am now. But it should (perhaps with a little tweaking) work, try it out if you haven't already.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Apr 2008
    Posts
    32
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    John,

    It is getting closer for sure, I had to make a few minor alterations (albeit I am no Java programmer, so you may have to point out my stupidity.) Let me tell you what I did, and what is now happening:

    I added the MM_swapImgRestore(); to the java script, and the only way I was able to get it to (sort of) work was to only add onMouseOut="delayhidemenu()"

    The rollover remains if you scroll down the menu (which is great) and now dissapears only if mouse out on the menu. If you jump from link to link, without mousing over the drop down, the roll over remains??

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Good! I knew the idea was basically sound. And, yes - that's what I was saying, get rid of MM_swapImgRestore(); from the onmouseout event. You might be able to take care of that last problem by adding MM_swapImgRestore(); to onmouseover event, so in all you would end up with something like so:

    Code:
    <a href="who.html" onmouseout="delayhidemenu();" 
    onclick="return clickreturnvalue();"
    onmouseover="MM_swapImgRestore();MM_swapImage('who_button','','images/who_over.jpg',1);
    dropdownmenu(this, event, menu1, '150px');"><img 
    src="images/who_button.jpg" name="who_button" width="104" height="27" border="0"></a>
    The only trouble with that is that MM_swapImgRestore(); may or may not need to be modified to work that way. It all depends upon how well it might react when it is invoked when there is nothing to restore, which in turn depends upon how well it is written. I'll have a closer look at it and get back to you if I see any problems with this idea. But, in the meantime, you may as well give it a shot to see what happens. I see that there is no copy of MM_swapImgRestore(); in this thread, I know that there are various versions of this around, could you post the one that you are using?

    Edit: I just found this version of MM_swapImgRestore():

    Code:
    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;
    }
    If yours is anything like that, it should be added to if it is to be used as I suggested earlier in this post:

    Code:
    function MM_swapImgRestore() { //v3.0
    if(!document.MM_sr) return;
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    Last edited by jscheuer1; 04-30-2008 at 03:51 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Apr 2008
    Posts
    32
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Bingo! Worked like a charm.. and yes, my MM_swapImgRestore read exactly as yours. Thanks a million.

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
  •