How do I change the source of an image on hover generically (by appending a suffix)?

I have a navigation bar that relies on icons instead of text. I would like to swap the icon on hover for an alternative icon, however, instead of manually entering src attributes; on hover, I am looking for a jQuery script that will append "-h" to the end of the image src (before the .png extension). For example, when icon "home.png" is hovered over, jQuery changes it's src to "home-h.png"; and the same for about.png=>about-h.png etc. On mouse out, the image should then revert back to its original.

Is this possible?

Thanks, Jamie开发者_JAVA技巧

This should work for you:

$("#navbar img").hover(
    function(){
        $(this).attr('src', $(this).attr('src').replace(/\.png$/, '-h.png'));
    }, 
    function () {
        $(this).attr('src', $(this).attr('src').replace(/-h\.png$/, '.png'));
    }
);