title: JQuery - replace image on hover
body: <p>I have an images folder. Within this folder, I have several images of two types; one <code>png</code> and one <code>gif</code>.  The displayed image is the <code>png</code> version. On an image hover, I need to replace it with its <code>gif</code> version.  And when hover is out, put the <code>png</code> version back in place.</p>
  
  <p>I currently have the following which works</p>
  
  <pre><code>$(".image-container").mouseover(function () {
      var imgName = $(this).find('img').attr('src');
      var img2 = imgName.substring(0, imgName.lastIndexOf("."));
      $(this).find('img').attr("src", img2+".gif");
  }).mouseout(function () {
      var imgName = $(this).find('img').attr('src');
      var img2 = imgName.substring(0, imgName.lastIndexOf("."));
      $(this).find('img').attr("src", img2+".png");
  });
  </code></pre>
  
  <p>It works, but I dont like the way I am repeating things.  Is there any way to make this more efficient?</p>
  
  <p>Thanks</p>