Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Rollover Menu... EVAL and Variable Scope Confusion

    Hi,

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

    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

  • #2
    Regular Coder
    Join Date
    Jan 2003
    Posts
    867
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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:

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

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @arnyinc
    Thanks for the reply, but....
    Error: document.getElementById(old_menuname) is null

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

    Code:
    //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?
    Last edited by t_kio; 06-13-2008 at 06:24 PM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    cant test this without your images but may help

    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    t_kio (06-13-2008)

  • #5
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •