title: jQuery img.src reset after click
body: <p>I have problem with navigation.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;ul id="menu_bar"&gt;
      &lt;li&gt;&lt;a href="#home" class="hov selected"&gt;&lt;img src="img/Home_on.png" alt="Home" /&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#portfolio" class="hov"&gt;&lt;img src="img/Portfolio_off.png" alt="Portfolio" /&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#about" class="hov"&gt;&lt;img src="img/About_off.png" alt="About" /&gt;About&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#contact" class="hov"&gt;&lt;img src="img/Contact_off.png" alt="Contact" /&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h3>JS</h3>
  
  <pre><code>$(document).ready(function() {
      $("img.roll").hover(
          function() { this.src = this.src.replace("_off", "_over");},
          function() { this.src = this.src.replace("_over", "_off");}
      );
      $("a.hov").hover(
          function() {
              var img = $(this).find("img")[0];
              img.src = img.src.replace("_off", "_over");},
          function() {
              var img = $(this).find("img")[0];
              img.src = img.src.replace("_over", "_off");}
      );
      $("a.hov").click(
          function() {
              var img = $(this).find("img")[0];
              img.src = img.src.replace("_over", "_on");
              $("a.hov").removeClass("selected");
              $(this).addClass("selected");
          }
      );
  
  });
  </code></pre>
  
  <p>I want to make on click function that will change anchor class, change img src inside of this anchor and when i use it on another anchor it will reset last clicked anchor to normal class and normal img src.
  Now my function remove class from all "a.hov", but not change img.src to "_off" for all this items, and don't know how make it.</p>