CSSで画像切替（ロールオーバー）
ロールオーバーでの画像切替をスタイルシートで簡単に実現する方法について。
ちょっと探した限り、どこにも載っていなかった簡単な方法があるのでご紹介。
ちなみに、どのような動きを実現するのかは一目見ていただければ一目瞭然なので、サンプルへのリンクを下記に記しておく。
▼こちらから飛んだ先で実現する動きを確認していただきたい
CSSで画像切替（ロールオーバー）の例
さて、上記リンク先の動きを実現しようとネットで検索をかけてみると、
当然ながら(?)、「a:hover」を用いるものが多く見られる。
それで、実現手段としては、「背景画像の位置をずらして表示する」
というものだ。
だけれども、この方式だと、第一に画像の大きさが２倍になり、読み込みが重くなりそうだし、
そもそも、画像を結合して一つにするのがめんどくさい。（やってみた ^^;）
そんな悩みを抱えていたある日、どこかで面白い記述方法を見つけた。
以後、その方法でcssによるロールオーバーでの画像切替を行っている。
要点が分かりやすいように、極力無駄を省いたソースになっているので、
分かる人はソースを見ていただければご理解いただけるかと思いますが、
以後、少し解説を。
実際のところ、ポイントとなるのは、下記の部分だ。
▼css
.rollover_banner{
display:block;
text-indent:-9999px;
background: url(../images/banner_up.jpg) no-repeat center top;
width: 340px;
height: 67px;
}
.rollover_banner:hover{
display:block;
text-indent:-9999px;
background: url(../images/banner_hover.jpg) no-repeat center top;
width: 340px;
height: 67px;
}
▼バナー部分のhtml
<a href="http://web-gijyutu.com/" class="rollover_banner">php MySQL apache などの設定メモ</a>
気づいていただけたか分からないが、「:hover」の使い方が、「a:hover」ではなく、「(クラス名):hover」となっている。
それを<a>タグのクラスとして利用するのだ。
これで驚くほど簡単に画像の切り替えが実現できる。
「(クラス名):hover」で変えているのは、バックグラウンドの画像リンクだけだ。
つまり、切り替え前と切り替えた後の二つの画像を用意しておけばよい。
ぜひ、お試しいただきたい。
タグ
2009年10月20日｜コメント （0）｜トラックバック （0）
カテゴリー：css(スタイルシート)
トラックバック（0）
http://web-gijyutu.com/tools/mtos42/mt-tb.cgi/7
コメントを投稿する
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
