JQuery hover function not working properly
<p>I have three images (ex. tab1.jpg) along with mouseover images (ex. tab1m.jpg) that I'm trying to reduce into a single JQuery hover function. Before I was using: </p>

<pre><code>$('#tab1').hover(function(){
    $(this).attr("src", 'images/tab1m.jpg');
},
function(){
    $(this).attr("src", 'images/tab1.jpg');
});
$('#tab2').hover(function(){
    $(this).attr("src", 'images/tab2m.jpg');
},
function(){
    $(this).attr("src", 'images/tab2.jpg');
});
$('#tab3').hover(function(){
    $(this).attr("src", 'images/tab3m.jpg');
},
function(){
    $(this).attr("src", 'images/tab3.jpg');
});
</code></pre>

<p>which worked, but was unnecessarily long and verbose. So I tried changing it to: </p>

<pre><code>$('.navimg').hover(function(){
    var tab = ($(this).attr('id')).substring(3,4);
    $(this).attr('src','images/tab'+tab+'m.jpg');
},
function(){
    $(this).attr('src','images/tab'+tab+'.jpg');
});
</code></pre>

<p>which hasn't been working--when I mouse over the image it changes successfully but does not revert back to the original (tab1.jpg/tab2/tab3) image. Can anyone tell me why this is happening? Thanks!</p>
