В чем смысл этих извращений, не пойму?
<style>
.demoIMG {
display: inline-block;
width: 24px;
height: 24px;
background: url(//javascript.ru/forum/images/smilies/yes4.gif) no-repeat;
}
.demoIMG:hover{
background: url(//javascript.ru/forum/images/smilies/tongue.gif) no-repeat;
}
</style>
<a class="demoIMG" href="#"></a>