title: How to dynamically change source of image based on current values in a table
body: <p>I have a webpage that currently displays a leaderboard and a picture. The picture is an image of whoever is currently in 1st place on the leaderboard. The html for this is as follows:</p>
  
  <pre><code>&lt;div id="leaderboardDiv"&gt;
  &lt;h1&gt;Leaderboard&lt;/h1&gt;
  &lt;table id="leaderboard"&gt;
      &lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;Owner&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Barry&lt;/td&gt;&lt;td&gt;166&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Tom&lt;/td&gt;&lt;td&gt;161&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Laura&lt;/td&gt;&lt;td&gt;159&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;Shane&lt;/td&gt;&lt;td&gt;153&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>        &lt;div id="pictureDiv"&gt;
              &lt;img src="/Content/Images/Barry.jpg" style="width:150px;height:200px" /&gt;
          &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I'd like to create a javascript function so that the image changes dynamically when the first place on the leaderboard changes. The Images folder contains a jpg of each of the people on the leaderboard with a file name that matches their leaderboard name exactly.</p>
  
  <p>Would it be possibly to write something in jQuery or javascript that could dynically alter the src of the img tag so that it matches whoever is in 1st place in the table? First place can be ideintified by being the content of the second column of the first  row of the table.</p>