ﾏｳｽで触れると画像が変わる仕組みは利用できると思います｡
以下のようにで試してみてください｡

記事に以下を記述

<a href="http://d.hatena.ne.jp/Sukai/" id="a"></a>

#a {
 display:block;
 width:200px;
 height:30px;
 border:0;
 background-color:transparent;
 background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
 background-position:top;
}
#a:hover {
 background-color:
transparent;
 background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
 background-position:bottom;
}

続きを読む機能としての画像を設置したいということだったんですね｡
自分のはてなﾌﾞﾛｸﾞで試行錯誤したらできました｡
前回書いた記述は全て消して､ﾃﾞｻﾞｲﾝCSSに以下を記述してください｡

.seemore{
font-size: 0em;
text-indent: -5000px;
position:relative; left:80px;
}
.seemore a {
display:block;
width:200px;
height:30px;
border:0;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:top;
}
.seemore a:hover {
width:200px;
height:30px;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:bottom;
}

できると､夢で見た