It seems to me that the sprite is set up perfectly for this task. The different images correspond to different actions: hovering over the book, sharing on Twitter, sharing on Facebook, and emailing. The last image likely represents the default state. While using pure CSS and :hover can be a bit tricky (but possible!), achieving this effect with JavaScript would be very straightforward.
For the pure CSS approach, the div containing the sprite should be nested within all text elements so that the background changes based on the parent element being hovered over (the text). If this explanation isn't clear enough, I'd be happy to provide you with some example code.
Edit:
Although not flawless, it serves as a proof of concept.
Here's the JsFiddle link: http://jsfiddle.net/jp6fy/
CSS:
#side{
position:relative;
height:341px;
width:250px;
}
#link1{
top:0;
}
.link{
position:absolute;
left:0;
top:85px;
height:85px;
padding-left:160px;
width:90px;
}
#image{
position:absolute;
top:-255px;
left:0;
z-index:-1;
background:url(https://i.sstatic.net/I2Y4k.png) -720px 0;
height:341px;
width:150px;
}
#link1:hover #image{
background-position:-540px 0;
}
#link2:hover #image{
background-position:-360px 0;
}
#link3:hover #image{
background-position:-180px 0;
}
#link4:hover #image{
background-position:0 0;
}
HTML:
<div id='side'>
<div class='link' id='link1'>
email
<div class='link' id='link2'>
facebook
<div class='link' id='link3'>
twitter
<div class='link' id='link4'>
book
<div id='image'></div>
</div>
</div>
</div>
</div>
</div>