title: Change content of two divs when image click
body: <p>I would like guidance on using jQuery to change the content of two divs, one has an image and the other has text, with the click of a thumbnail in a carousel.  Is there a more elegant way to do this?  </p>
  
  <p>How can I use a REL tag in the IMG tag to handle the big image?</p>
  
  <pre><code>  &lt;html&gt;&lt;head&gt;
      &lt;script type="text/javascript" src="jcarousel/js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="jMyCarousel.css" /&gt;  
      &lt;script type="text/javascript" src="jMyCarousel.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function() {
      $(".jMyCarousel").jMyCarousel({ visible: '100%'  }); 
  
      $("li#one").click(function() {
          $("#changeText").html("&lt;img src='img/12.jpg'&gt;");
          $("#textBox").html("One has been clicked!");
      });
      });
      &lt;/script&gt;
      &lt;/head&gt;&lt;body id="#lab-project"&gt;
  
      &lt;div id="changeText"&gt;&lt;/div&gt;
      &lt;br /&gt;
      &lt;div id="textBox"&gt;This text will be changed to something else&lt;/div&gt; 
  
       &lt;div class="jMyCarousel"&gt;  
       &lt;ul&gt;  
           &lt;li id="one"&gt;&lt;img src="img/1.jpg" width="200" height="150"&gt;&lt;/li&gt;  
           &lt;li&gt;&lt;a href="img/2.jpg" title=""&gt;&lt;img src="img/2.jpg" width="200" height="150"&gt;&lt;/a&gt;&lt;/li&gt;  
           &lt;li&gt;&lt;a href="img/3.jpg" title=""&gt;&lt;img src="img/3.jpg" width="200" height="150"&gt;&lt;/a&gt;&lt;/li&gt;  
           &lt;li&gt;&lt;a href="img/4.jpg" title=""&gt;&lt;img src="img/4.jpg" width="200" height="150"&gt;&lt;/a&gt;&lt;/li&gt;  
           &lt;li&gt;&lt;a href="img/11.jpg" title=""&gt;&lt;img src="img/11.jpg" width="200" height="150"&gt;&lt;/a&gt;&lt;/li&gt;  
           &lt;li&gt;&lt;a href="img/11.jpg" title="" &gt;hello world&lt;/a&gt;&lt;/li&gt;  
      &lt;/ul&gt;  
      &lt;/div&gt;
      &lt;/body&gt;&lt;/html&gt;
  </code></pre>