title: Dynamically changing source of image - jQuery
body: <p>I got the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="image"&gt;
      &lt;img src="http://ecx.images-amazon.com/images/I/41ghiuvjdvL._SL75_SS50_.jpg" /&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;
  
  &lt;div class="photo"&gt;
      &lt;img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/27520_119569768054263_2432_q.jpg" /&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// getting src of bottom image
  var bottomSrc = $(".photo img").find("src");
  
  // getting src of top image
  var topSrc = $(".image img").find("src");
  
  $(".photo").click(function() {
      // changing sources
      // topSrc.attr("src", bottomSrc);
      // topSrc.replaceWith(bottomSrc);
      topSrc.replace(bottomSrc);
  })​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/LyMZd/1" rel="nofollow">Fiddle</a></p>
  
  <p>When the bottom image is clicked, I want the <code>src</code> of the top image to be replaced with the bottom image's <code>src</code>, so that both images are the same.</p>
  
  <p>Why does the supplied code does not work?</p>