JQuery - replace image on hover
<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>