ＣＳＳでロールオーバー．．．
アメブロだとJavaScript禁止だから，ロールオーバーしようとするとこんなくらいしか出来ないのかな？
画像やリンク文字「あとのまつり」にカーソルを乗せると，画像が変わります～
リンク部分に適用させるCSSの応用です．
全部のリンクタグに適用させると問題なので，クラスを設定しました．
a.imglink:active{}
のCSSを設定すると，リンクをクリックしたときに画像を変えるということもできます．
display: block;
を設定してあるので，適用範囲が１行単位になってしまうのが，なんですけれど．．．(^^;
CSSソース
a.imglink{
display: block;
background-image: url(カーソルを乗せる前の画像のURL);
background-repeat: no-repeat;
text-decoration: none;
background-position: left center;
padding-left: 100px;
height: 31px;
}
a.imglink:hover{
display: block;
background-image: url(カーソルを乗せた後の画像のURL
);
background-repeat: no-repeat;
text-decoration: none;
background-position: left center;
padding-left: 100px;
height: 31px;
}
記事の方のソース
<a class="imglink" href="http://ameblo.jp/maser/ ">あとのまつり</a>