(X)HTML 5 hover effect with prefetch.

html5_hover.js

// (X)HTML 5 hover effect with prefetch.
// By DanielO
//
// Usage: <img src="pic.png" alt="Pic" data-img-hover="hover.png"  />
//
// Just add the data-img-hover attribute to your image and your good to go.
// Note that data-* attributes are new to HTML 5. 

$(function () {

    // Hover effect
    $('img[data-img-hover]').hover(function () {
        var img = $(this).attr('src');
        $(this).attr('src', $(this).attr('data-img-hover'));
        $(this).attr('data-img-hover', img);
    }, function () {
        var img = $(this).attr('src');
        $(this).attr('src', $(this).attr('data-img-hover'));
        $(this).attr('data-img-hover', img);
    });

    // Prefetch
    $('img[data-img-hover]').each(
        function () {
            var img = new Image();
            $(img).attr('src', $(this).attr('data-img-hover'));
        }
    );

});