PDA

View Full Version : Rollover Image for 'AnyLink Drop Down Menu'



Mng026
04-28-2008, 11:58 PM
1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.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
04-29-2008, 05:28 AM
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
04-29-2008, 06:43 AM
<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
04-29-2008, 12:49 PM
Thanks for the quick answers, but unfortunately it is still losing the rollover image when you scroll down the menu... any other suggestions??

jscheuer1
04-29-2008, 06:07 PM
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
04-29-2008, 07:16 PM
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
04-29-2008, 07:46 PM
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
04-29-2008, 09:04 PM
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
04-30-2008, 03:32 AM
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?

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
04-30-2008, 05:22 PM
Bingo! Worked like a charm.. and yes, my MM_swapImgRestore read exactly as yours. Thanks a million.