Rollover trouble.

Rollover trouble.

I have a jquery image-swap which is working fine. Here is the code:

$(document).ready(function(){
   $(".attachment-post-thumbnail").hover( function() {
       var hoverImg = HoverImgOf($(this).attr("src"));
       $(this).attr("src", hoverImg);
     }, function() {
       var normalImg = NormalImgOf($(this).attr("src"));
       $(this).attr("src", normalImg);
     }
   );
});

function HoverImgOf(filename)
{
   var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1_hover.$2");
}
function NormalImgOf(filename)
{
   var re = new RegExp("(.+)_hover\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1.$2");
}

so basically I upload a image (image.jpg) and a second image with _hover (image_hover.jpg) within the same directory and the code swaps between the two on hover. 

Here's my problem. If you hover over the image and click it will swap and go to the link, which is all good. However, if you click on the browser back button it shows the swapped image (image_hover.jpg) and not the original (image.jpg) because when the page left it was displaying the hover state image (image_hover.jpg) so the browser remembers that as the last cached image. Does that make sense? 

Any help would be appreciated as I am learning jQuery. 

Thanks in advance.