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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    global variables - how to interact with user?

    I'm new to javascript, but I need help and really hoping for a reply. I was trying to find an answer in Google but no result.

    So I have two table containing images, at the beginning only first table is displayed. Then when one of the images in the first table is clicked, a second table should appear, and user should click one of the images on that table. And that image should replace the one that was clicked originally in the first table.

    So the question is, when the user clicks an image in the second table, how do I know what was originally clicked in the first one? I tried to use global variable but that doesn't work.

    Any help would be appreciated, thank you for reading

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Yes, a global variable. If you tried that and it didn't work, then you goofed someplace.

    Show us your code. We can't debug non-existent code.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    I'm practicing my typing today. And learning about anons.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <base href="http://www.noao.edu/image_gallery/images/" />
    <style type="text/css">
    body {background: black;text-align:center;}
    table {border-collapse: collapse;margin: 20px 50px;}
    td {border:1px white ridge;}
    #t1 {display:inline;}
    #t2 {display:none;}
    img {width:100px;height:100px;}
    </style>
    <script type = "text/javascript">
    
    var curr;
    
    function show_n_tell(e, id)
    {
       var el = document.getElementById(id);
       if (el)
       {
          var state = (el.style.display == 'inline');
          el.style.display = state ? 'none' : 'inline';
       }
       e = e || window.event; //event object
       curr = e.target || e.srcElement; //img object
    }
    
    function pic_out(e)
    {
       e = e || window.event;
       target = e.target || e.srcElement;
       curr.src = target.src; //transfer
    }
    
    </script>
    </head>
    <body>
    <table id="t1" onclick="show_n_tell(event, 't2')">
    <thead>
    </thead>
    <tbody>
    <tr>
    <td><img src="hnla.gif" /></td>
    <td><img src="d6/m27mmb.jpg" /></td>
    <td><img src="gkperca2.gif" /></td>
    </tr>
    <tr>
    <td><img src="d2/ngc2237_200.jpg" /></td>
    <td><img src="gkpera2.gif" /></td>
    <td><img src="d3/ic1396-200.jpg" /></td>
    </tr><tr>
    <td><img src="d3/abell39c.jpg" /></td>
    <td><img src="d4/m43b.jpg" /></td>
    <td><img src="d3/04535b.jpg" /></td>
    </tr>
    </tbody>
    </table>
    
    <table id="t2" onclick="pic_out(event)">
    <thead>
    </thead>
    <tbody>
    <tr>
    <td><img src="crl2688a2.gif" /></td>
    <td><img src="d6/m76b.jpg" /></td>
    <td><img src="d3/03127b.jpg" /></td>
    </tr>
    <tr>
    <td><img src="d6/m21a20b.jpg" /></td>
    <td><img src="d4/crab1b.jpg" /></td>
    <td><img src="hnla.gif" /></td>
    </tr><tr>
    <td><img src="d2/02172b.jpg" /></td>
    <td><img src="d2/hh666_200.jpg" /></td>
    <td><img src="d2/b163-200.jpg" /></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    Don't quite get the point of it, but I'm sure there is one ...

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Actually while preparing code for Old Pedant I found out that it actually works, thank you a lot.

    Can I ask a different question, I want to display second table over the first one - currently I'm using css z-index to to that, is there more convenient way to do that? (I don't want new window)

    Thank you!

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Z-index with absolute positioning is fine, except that I gather you don't ever want these two galleries onscreen at the same time. Is this some sort of picture game? Interesting. If the above is true, then just alternating between them with CSS display makes more sense to me. Just a thought.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <base href="http://www.noao.edu/image_gallery/images/" />
    <style type="text/css">
    body {background: black;text-align:center;}
    table {border-collapse: collapse;margin: 80px 50px;}
    td {border:1px white ridge;}
    #t1 {display:inline;}
    #t2 {display:none;}
    img {width:100px;height:100px;}
    </style>
    <script type = "text/javascript">
    
    var clikpic;
    
    function showhide(e, tbl1, tbl2)
    {
       tbl1.style.display = (tbl1.style.display == 'none') ? 'inline' : 'none';
       if (tbl1.style.display == 'none')
       {
          tbl2.style.display = 'inline'; //flip 'em
          clikpic = gettarget(e); //save click
       }
       else 
       {
          tbl2.style.display = 'none'; //back to first
          clikpic.src = gettarget(e).src; //transfer
       }
    }
    
    function gettarget(e) //clicked pic
    {
       e = e || window.event;
       var target = e.target || e.srcElement;
       return target;
    }
    
    </script>
    </head>
    <body>
    <table id="t1" onclick="showhide(event, this, document.getElementById('t2'))">
    <thead>
    </thead>
    <tbody>
    <tr>
    <td><img src="hnla.gif" /></td>
    <td><img src="d6/m27mmb.jpg" /></td>
    <td><img src="gkperca2.gif" /></td>
    </tr>
    <tr>
    <td><img src="d2/ngc2237_200.jpg" /></td>
    <td><img src="gkpera2.gif" /></td>
    <td><img src="d3/ic1396-200.jpg" /></td>
    </tr><tr>
    <td><img src="d3/abell39c.jpg" /></td>
    <td><img src="d4/m43b.jpg" /></td>
    <td><img src="d3/04535b.jpg" /></td>
    </tr>
    </tbody>
    </table>
    
    <table id="t2" onclick="showhide(event, document.getElementById('t1'), this)">
    <thead>
    </thead>
    <tbody>
    <tr>
    <td><img src="crl2688a2.gif" /></td>
    <td><img src="d6/m76b.jpg" /></td>
    <td><img src="d3/03127b.jpg" /></td>
    </tr>
    <tr>
    <td><img src="d6/m21a20b.jpg" /></td>
    <td><img src="d4/crab1b.jpg" /></td>
    <td><img src="hnla.gif" /></td>
    </tr><tr>
    <td><img src="d2/02172b.jpg" /></td>
    <td><img src="d2/hh666_200.jpg" /></td>
    <td><img src="d2/b163-200.jpg" /></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  • Users who have thanked adios for this post:

    helavissa (05-17-2009)

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thank you adios

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I can't get the border swapping correct. Obviously, the red border should only display when the map is being changed. How can I fix it?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <base href="http://www.noao.edu/image_gallery/images/" />
    <style type="text/css">
    body {background: black;text-align:center;}
    table {border-collapse: collapse;margin: 20px 50px;}
    td {border:1px white ridge;}
    #t1 {display:inline;}
    #t2 {display:none;}
    img {width:100px;height:100px;}
    </style>
    <script type = "text/javascript">
    
    var curr;
    
    function show_n_tell(e, id)
    {
       var el = document.getElementById(id);
       if (el)
       {
          var state = (el.style.display == 'inline');
          el.style.display = state ? 'none' : 'inline';
    if (el.style.display=='none') { el.parentNode.style.borderColor=''}else{ el.parentNode.style.borderColor='red'};
    
       }
       e = e || window.event; //event object
       curr = e.target || e.srcElement; //img object
    if (curr.style.display=='none') { curr.parentNode.style.borderColor='';target.parentNode.style.borderColor=''}else{ curr.parentNode.style.borderColor='red';target.parentNode.style.borderColor='red'};
    
    }
    
    function pic_out(e)
    {
       e = e || window.event;
       target = e.target || e.srcElement;
       curr.src = target.src; //transfer
    if (curr.style.display=='none') { curr.parentNode.style.borderColor='';target.parentNode.style.borderColor=''}else{ curr.parentNode.style.borderColor='red';target.parentNode.style.borderColor='red'};
    
    
    }
    
    </script>
    </head>
    <body>
    <table id="t1" onclick="show_n_tell(event, 't2')">
    <thead>
    </thead>
    <tbody>
    <tr>
    <td><img src="hnla.gif" /></td>
    <td><img src="d6/m27mmb.jpg" /></td>
    <td><img src="gkperca2.gif" /></td>
    </tr>
    <tr>
    <td><img src="d2/ngc2237_200.jpg" /></td>
    <td><img src="gkpera2.gif" /></td>
    <td><img src="d3/ic1396-200.jpg" /></td>
    </tr><tr>
    <td><img src="d3/abell39c.jpg" /></td>
    <td><img src="d4/m43b.jpg" /></td>
    <td><img src="d3/04535b.jpg" /></td>
    </tr>
    </tbody>
    </table>
    
    <table id="t2" onclick="pic_out(event)">
    <thead>
    </thead>
    <tbody>
    <tr>
    <td><img src="crl2688a2.gif" /></td>
    <td><img src="d6/m76b.jpg" /></td>
    <td><img src="d3/03127b.jpg" /></td>
    </tr>
    <tr>
    <td><img src="d6/m21a20b.jpg" /></td>
    <td><img src="d4/crab1b.jpg" /></td>
    <td><img src="hnla.gif" /></td>
    </tr><tr>
    <td><img src="d2/02172b.jpg" /></td>
    <td><img src="d2/hh666_200.jpg" /></td>
    <td><img src="d2/b163-200.jpg" /></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>


  •  

    Posting Permissions

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