Simple JavaScript Image Hover

Using data-* attributes

HTML

<img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" data-hover-image="http://www.google.com/images/logos/url_shortener_logo.gif"/>
<img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" data-hover-image="http://www.google.com/images/logos/url_shortener_logo.gif"/>

JavaScript

$('[data-hover-image]')
    .bind('mouseover', function(event) {
        var $this = $(this);
        
        if (!$this.data('original-image')) {
            $this.data('original-image', $this.attr('src'));
        }
        $this.attr('src', $this.attr('data-hover-image'));
    })
    .bind('mouseout', function(event) {
        var $this = $(this),
            original = $this.data('original-image');
        if (original) {
            $this.attr('src', original);
        }
    });