Rollover Menu... EVAL and Variable Scope Confusion

Hi,

I'm trying to create a rollover menu, here's the code:


var old_menuname="";

function MenuRollOver(menuname,direction) {
if(direction == "over" && document.getElementById(menuname).src != eval(menuname+"3").src) {
document.getElementById(menuname).src = eval(menuname+"2").src;
}
else if(direction == "out" && document.getElementById(menuname).src != eval(menuname+"3").src) {
document.getElementById(menuname).src = eval(menuname+"1").src;
}
else if(direction == "click" && document.getElementById(menuname).src != eval(menuname+"3").src) {
document.getElementById(menuname).src = eval(menuname+"3").src;
eval('document.getElementById("'+old_menuname+'").src') = eval(old_menuname+"1").src;;
old_menuname=menuname;
}
}


P.S. <menuname>1 = idle button, <menuname>2 = rollover button, <menuname>3 = clicked button.

The first and second condition works just fine, but the third (in bold)
does not. The idea is... I take note on what button is being clicked
by ID, and then switch that button back to its original (unclicked)
image when a new button is clicked.

What drives me nuts is... I can't use the variable old_menuname!
I think it's a scope (global vs non-global) issue but I'm not sure... :(

Any help would me MUCH appreciated.

This is my first post, btw... Thanks in advanced.

t_kio

For the most part, using eval() is considered to be bad practice. There is usually a workaround. Anyways, I think it's a syntax snafu in the line you highlighted. You can refer to the element by id thusly:


document.getElementById(old_menuname).src = eval(old_menuname+"1").src;

@arnyinc
Thanks for the reply, but....
Error: document.getElementById(old_menuname) is null

Maybe a showcase will clear things up. I have something like:

//The actual menu image name
<a href="#" onMouseOver=MenuRollOver("dog","over") onMouseOut=MenuRollOver("dog","out") onClick=MenuRollOver("dog","click")><img src="images/dog-idle.gif" id="dog" /></a>

//Pre-loaded menu images
dog1=new Image();
dog1.src="images/dog-idle.gif";
dog2=new Image();
dog2.src="images/dog-over.gif";
dog3=new Image();
dog3.src="images/dog-out.gif";


And the function MenuRollOver(menuname,direction) will, say... take "dog"
so I need to concate "1" ,"2", and "3" to menuname, and operate it as a variable.
(That's why there's so many eval() there...)

Then I will have old_menuname value copied from menuname "dog"... BUT
this time I can't get it work with document.getElementById().
It always returns "null" or "undefined".

Any idea?

cant test this without your images but may help

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var old_menuname;

function MenuRollOver(menuname) {
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if(zxcevt.type == "mouseover" && document.getElementById(menuname).src != window[menuname+"3"].src) {
document.getElementById(menuname).src = window[menuname+"2").src;
}
else if(zxcevt.type == "mouseout" && document.getElementById(menuname).src != window[menuname+"3"].src) {
document.getElementById(menuname).src = window[menuname+"1").src;
}
else if(zxcevt.type == "click" && document.getElementById(menuname).src != window[menuname+"3"].src) {
document.getElementById(menuname).src = window[menuname+"3").src;
if (old_menuname) document.getElementById(old_menuname).src = window[old_menuname+"1"].src;
old_menuname=menuname;
}
}
/*]]>*/
</script>

Wow Vic... how do you do that?!

Just copy-and-paste and some typo-fix... and BAM! It works!!
Thank you very much... You saved A LOT of my time!

Btw, could you plz elaborate what you're doing there? I don't quite follow it...

Thanks again - repped you!