CSSでリモートロールオーバー 実践編
先日のエントリ「CSSだけでリモートロールオーバー」の続編サンプルです。
cssソース
#sample01{
position:relative;
background:url(xxx.jpg) no-repeat right top;
width:550px;
height:200px;
}
#sample01 ul li a{
display:block;
width:142px;
height:30px;
background:url(xxx.gif) no-repeat left top;
color:#fff;
font-weight:bold;
}
#sample01 ul li a span{
display:none;
}
#sample01 ul li a:hover span{
position:absolute;
top:0px;
right:0px;
display:block;
width:400px;
height:200px;
text-indent:-999px;
}
#sample01 ul li#menu01 a:hover span{background:url(xxx.jpg) no-repeat right top;}
#sample01 ul li#menu02 a:hover span{background:url(xxx.jpg) no-repeat right top;}
#sample01 ul li#menu03 a:hover span{background:url(xxx.jpg) no-repeat right top;}
#sample01 ul li#menu04 a:hover span{background:url(xxx.jpg) no-repeat right top;}
#sample01 ul li#menu05 a:hover span{background:url(xxx.jpg) no-repeat right top;}
a:hover{border:none;}
xhtmlソース
<div id="sample01">
<ul>
<li id="menu01"><a href="#">RedLineMagazine<span>このサイトのことです。</span></a></li>
<li id="menu02"><a href="#">REDLINE ブログ<span>管理者の別ブログです。あまり実用性はありません。</span></a></li>
<li id="menu03"><a href="#">Google<span>検索ならここ。</span></a></li>
<li id="menu04"><a href="#">Yahoo<span>日本人が好きなポータル。</span></a></li>
<li id="menu05"><a href="#">Livedoor<span>ここのRSSリーダー愛用中。</span></a></li>
</ul>
</div>
ちょっとだけ解説
とりあえず、先日のサンプル同様、まずは画像を用意。今回もhover時の画像はバラしたけど、まとめて１つの画像にして背景の表示位置をcssで指定しても可。画像が大きい時はプリロードしておく方がいいのかも。
やってる事は先日のサンプルと一緒。
その部分全体を囲うdivにposition:relative;を指定してからデフォルト時の画像を表示させたり、ボタンを配置したり。あとはspan内をhover時にどう反応させるかの指定だけ。絶対配置の仕組を知ってれば特にややこしい事はないと思われ。アレンジ方法もいろいろあると思う。
当然CSSだけでやってるので、js無効だったらどうしよう、とかフラッシュのプラグインどうたらとかいう心配はなし。ただ、最近話題の「CSSオンで画像オフのケースの画像置換ってどうよ」の話の観点から考えるとどっちみちアウト。画像の後ろにspan内テキストを置いておくのも手かな。
