title: How to link javascript function to html input
body: <p>*New question following suggestions:</p>
  
  <p>HTML head contains:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="myscript.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
      &lt;table id="table1"&gt;
          &lt;tr&gt;
              &lt;th&gt;Table&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;a href="javascript:;" rel="img1"&gt;Link1&lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a a href="javascript:;" rel="img2"&gt;Link2&lt;/a&gt;
              &lt;/td&gt;            
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="box"&gt;
      &lt;img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1" class="images"/&gt;
      &lt;img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2" class="images"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#sidebar {
      display: inline-block;
      height: auto;
      width: auto;
      font-family: Garamond;
      font-size: large;
  }
  
  #table1 {
      border: 1px solid black;
      text-align: center;
  }
  
  #table1 th {
      border: 1px solid black;
  }
  
  #table1 td {
      border: 1px solid black;
  }
  
  #box {
      position: relative;
      height: 200px;
      width: 1200px;
  }
  
  .images {
      display:none;
      position: absolute;
      top: 0px;
      left: 0px;
  }
  </code></pre>
  
  <p>And my Javascript:</p>
  
  <pre><code>$('a').click(function(){
      imgid = $(this).attr('rel');
      $('a').removeClass('active');
      $(this).addClass('active');
  
      $('img').hide();    
      $('#'+imgid).fadeIn('slow');
  });
  </code></pre>
  
  <p>This should mean that when the  Link1 is clicked, the first image appears and when the  Link 2 is clicked, the second image appears and the first goes away (the images are on top of each other in CSS). However, when either of the two are clicked, nothing happens. Any suggestions why this may be the case?</p>