title: Cannot read property 'replace' of undefined
body: <p>I have a simple menu with images. The image source changes depending on viewer's action (mouseover, click, nothing). I am having trouble to reset the non-active images source to default when another image is clicked?</p>
  
  <p>(on-click) button1S.jpg -> button1S_active.jpg</p>
  
  <p>I have tried to use .not(this).replace, but I get an error according to chrome "Cannot read property 'replace' of undefined".</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript" src="jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;img class="logo" src="logo.jpg"&gt;&lt;br&gt;
  &lt;img class="menu_btn" src="button1S.jpg"&gt;&lt;br&gt;
  &lt;img class="menu_btn" src="button2S.jpg"&gt;&lt;br&gt;
  &lt;img class="menu_btn" src="button3S.jpg"&gt;&lt;br&gt;
  &lt;img class="menu_btn" src="button4S.jpg"&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  $("img.menu_btn").hover(
  
  function () {
      this.src = this.src.replace('.jpg', '_hover.jpg');
      $(this).addClass('hovered');
  },
  
  function () {
      this.src = this.src.replace('_hover.jpg', '.jpg');
      $(this).removeClass('hovered');
  });
  
  $('img.menu_btn').click(
  
  function () {
      var unactive = $('img.menu_btn').not(this);
      unactive.src = unactive.src.replace('_active.jpg', '.jpg'); //without this, it works but _active.jpg isn't removed when unactive.
      unactive.removeClass("active");
      $(this).addClass('active');
      this.src = this.src.replace('_hover.jpg', '_active.jpg');
      alert(this.src);
  });
  </code></pre>
  
  <p></p>
  
  <p>Thank you very much.</p>