title: Replace image using jQuery
body: <p>Here is my <strong>HTML</strong>:</p>
  
  <pre><code>&lt;div id="show"&gt;
      &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm"
  &gt;
  &lt;/div&gt;
  &lt;div id="thumbnails"&gt;
      &lt;div id="thumbnail1"&gt;
          &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR"
          width="100" height="100"&gt;
      &lt;/div&gt;
      &lt;div id="thumbnail2"&gt;
          &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm"
          width="100" height="100"&gt;
      &lt;/div&gt;
      &lt;div id="thumbnail3"&gt;
          &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsplNlIS3zRyy89UxlT5Nwu_Bn7m6w7iqMYXPF9q9MpLOG17XR"
          width="100" height="100"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <strong>CSS</strong>:</p>
  
  <pre><code>#thumbnails div {
      float:left;
      border:1px solid;
  }
  #thumbnails div:hover {
      color:yellow;
  }
  </code></pre>
  
  <p>So, I just want to change the <code>div #show</code> with any thumbnails below it when clicked. I've tried it using <code>jQuery .attr('src', 'url');</code> but it doesn't work well. </p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/PemHv/" rel="nofollow">http://jsfiddle.net/PemHv/</a></p>
  
  <p>Thank you </p>