#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    108
    Rep Power
    12

    Simple dhtml problem, stupid pogrammer


    hmmm... i'm quite new to dhtml and such...
    what i'm trying to do is make two text links
    an A and a B
    when u onmouseover A, 1-2 shows up as text below the link, and when you onmouseover B, 3-4 shows up below the links as text

    p.s. i suck

    <html>
    <head>

    <script language="Javascript">

    function createLowerNav()
    {
    document.writeln('<DIV id="navText1">1 - 2</div>');
    document.writeln('<DIV id="navText2">3 - 4</div>');
    }

    function showLayer(x)
    {
    document.getElementById(navText1).style.visibility = "hidden";
    document.getElementById(navText2).style.visibility = "hidden";
    document.getElementById(x).style.visibility = "visible";
    }

    </script>

    </head>

    <body onLoad="showLayer(navText1);">

    <a href="" onMouseOver = showLayer('navText1'); return true;>a</a>
    <a href="" onMouseOver = showLayer('navText2'); return true;>b</a>

    <script language="Javascript">
    createLowerNav();
    </script>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Dissident
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Mar 2003
    Location
    New York
    Posts
    1,671
    Rep Power
    49
    First things first...

    1) When posting, try to include a description of the problem in your post. Simply saying something doesn't work doesn't give people a lot to go on in terms of bug testings.

    2) When posting, include a brief description of your probem in the title of your thread. Telling people what sort of problem you are having your title encourages people to come help, seeing a glib remark about how you are dumb doesn't really inspire people.

    Now that that is over with, on to some code.

    Your code is basically correct. The only thing you did wrong was not quoting some elements properly. Basically when javascript looks at a word in your code that it doesn't recognize it thinks you are giving it either a variable or a function call. If it can't find an appropriate function call or variable of the same name, then it is going to throw back an error saying that it doesn't understand what you want. We avoid this little problem by quoting words that are meant to be strings.


    With that in mind here is your same code with the elements properly quoted:

    Code:
    <html>
    <head>
    <script language="Javascript">
    <!--
    
    	function createLowerNav()
    	{
    		document.writeln('<DIV id="navText1">1 - 2</div>');
    		document.writeln('<DIV id="navText2">3 - 4</div>');
    	}
    
    	function showLayer(x)
    	{
    		document.getElementById('navText1').style.visibility = "hidden";
    		document.getElementById('navText2').style.visibility = "hidden";
    
    		document.getElementById(x).style.visibility = "visible";
    	}
    
    // -->
    </script>
    </head>
    
    <body onLoad="showLayer('navText1');">
    
    <a href="" onMouseOver = showLayer('navText1'); return true;>a</a>
    <a href="" onMouseOver = showLayer('navText2'); return true;>b</a>
    
    <script language="Javascript">
    	createLowerNav();
    </script>
    
    </body>
    </html>
    You were making calls like

    showLayer( navText1 )

    and javascript was trying to find a variable named navText1 and was getting confused.

    PS. Indenting is your friend.

IMN logo majestic logo threadwatch logo seochat tools logo