Animating “src” attribute

Question

I have an HTML document. It looks like this:

When the user hovers \"stackinfo\" image, I w

Answer 1

Edited my answer based off of the edit the OP made. Below uses a css sprite and animates the opacity using css3. Note this will not work in any IE9<.

Live Demo

More in depth explanation

.sprite{
    width:100px;
    height:100px;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    display:inline-block;
    position:relative;
}
.sprite span{
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    background-position: left -100px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;   
}

.sprite:hover span{
 opacity: 1;   
}

​ ​