//http://www.yart.com.au/Resources/jQuery/jQuery---Auto-replace-image-on-hover.aspx
$(document).ready(function () {
    // Change the image of hoverable images
    $(".nav_buttons").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_on.$2");
}
function NormalImgOf(filename) {
    var re = new RegExp("(.+)_on\\.(gif|png|jpg)", "g");
    return filename.replace(re, "$1.$2");
}

//http://www.hv-designs.co.uk/2010/01/13/learn-how-to-add-a-jquery-fade-in-and-out-effect/
$(function () {
    // OPACITY OF BUTTON SET TO 50%
    $(".nav_buttons").css("opacity", "0.8");

    // ON MOUSE OVER
    $(".nav_buttons").hover(function () {

        // SET OPACITY TO 100%
        $(this).stop().animate({
            opacity: 1.0
        }, "slow");
    },

    // ON MOUSE OUT
function () {

    // SET OPACITY BACK TO 50%
    $(this).stop().animate({
        opacity: 0.8
    }, "slow");
});
});