title: jquery - Undefined src when using attr() of image
body: <p>Just learning jQuery. What I want is to grab the src of the image and display it in a fixed division, kind of like a pop up, with the title of the image. But I'm stuck at getting the src of the image.</p>
  
  <p>When I tried using the .attr(), its giving me <code>undefined</code>.</p>
  
  <p>HTML:</p>
  
  <pre><code>            &lt;div id="album"&gt;
  
                  &lt;div class="pic"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="screen"&gt;
                      &lt;h1 class="title"&gt;Photo 1&lt;/h1&gt;
                      &lt;img src="images/1 png.png" class="image" /&gt;
                      &lt;p class="description"&gt;This is a description&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="screen"&gt;
                      &lt;h1 class="title"&gt;Photo 1&lt;/h1&gt;
                      &lt;img src="images/1 png.png" class="image" /&gt;
                      &lt;p class="description"&gt;This is a description&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;span class="clear_left"&gt;&lt;/span&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.screen {
      border: 1px solid green;
      margin: 10px auto;
      float: left;
      cursor:pointer
  }
  
  .image {
      width: 300px;
  
  }
  
  .title {
      font-size: 30px;
  }
  
  .description {
      font-size: 25px;
  }
  
  .pic {
      width: 600px;
      position:fixed;
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$(document).ready(function () {
      $(".pic").hide();
      $(".screen").click(function () {
          display();
      });
  });
  
  function display() {
      var source = $("img",this).attr("src");
      alert("The souce of the image is " + source);
  }
  </code></pre>