Rollover Image for 'AnyLink Drop Down Menu'

[Mng026]

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:

<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

[rangana]

Have you tried it like this:

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

[jscheuer1]

<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.

[Mng026]

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

[jscheuer1]

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

MM_swapImgRestore()

in its:

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:

onmouseout="MM_swapImgRestore();delayhidemenu();"

[Mng026]

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

[jscheuer1]

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.

[Mng026]

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??

[jscheuer1]

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:

<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():

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:

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;
}

[Mng026]

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