SO - 19511185

by Arun P Johny

HTML

<ul>
    <li> 
        <a> item 1
            <img src="http://placehold.it/32/ff0000.png" />
        </a>
    </li>
    <li> 
        <a> item 2
            <img src="http://placehold.it/32/ffff00.png" />
        </a>
    </li>
    <li> 
        <a> item 3
            <img src="http://placehold.it/32/aabbcc.png" />
        </a>
    </li>
</ul>

JavaScript

$('ul img').hover(function (e) {
    $(this).attr('src', function (idx, src) {
        return src.replace(/(.)(png|gif)$/i, '.' + (e.type == 'mouseenter' ? 'gif': 'png'))
    })
})