以前までは、JavaScriptを使ったロールオーバーが一般的でしたが、最近はCSSでロールオーバーを再現しているサイトも多いようです。CSSファイルのみを管理すればよいので便利かもしれませんね。
■サンプルロールオーバー
■サンプルHTML
<div class="sample_01"><a href=" URL"></a></div>
a要素の中が空なのがミソ。img要素は使用してませんよ。
■サンプルCSS
.sample_01 a {
display: block;
width: 156px;
height: 41px;
background: url(http://www.cptskgj.com/ilog/images/sample_01.jpg) no-repeat;
}
.sample_01 a:hover {
background: url(http://www.cptskgj.com/ilog/images/sample_01_r.jpg) no-repeat;
}
ここで大切なのが display: block; の指定です。空のa要素をブロック要素にして幅・高さを指定します。その空のa要素に background プロパティで画像を表示させます。そして、ロールオーバーには:hover疑似要素で background の画像を変えます。
これで、CSSロールオーバーの完成です。簡単でしょ。
【参考サイト】
HAC Design：CSS（スタイルシート）ロールオーバー
http://hac-design.com/css/rollover.html
追記：ロールオーバーにタイムラグがあるので、こちら↓を参照したいただいた方がいいかもしれません。
http://www.cptskgj.com/ilog/2008/04/css-img-visibility.php
追記：ロールオーバーにタイムラグがあるので、こちら↓を参照したいただいた方がいいかもしれません。
http://www.cptskgj.com/ilog/2008/04/css-img-visibility.php
&
ブクマしました～～♪
まりさんブクマありがとうございました〜♪