CSSでリモートロールオーバー サンプル
下のリンクにマウスを合わせてみてください。
各リンクに合わせて上の白黒画像がカラー画像に差し代わります。
cssソース
<style type="text/css">
<!--
#sample01{
position:relative;
background:url(xxx.jpg) no-repeat left top;
width:446px;
}
#sample01 ul{
padding:185px 0px 0px;
}
#sample01 ul li#left a span,
#sample01 ul li#right a span{
display:none;
}
#sample01 ul li#left a:hover span,
#sample01 ul li#right a:hover span{
position:absolute;
display:block;
width:220px;
height:178px;
text-indent:-999px;
}
#sample01 ul li#left a:hover span{
background:url(xxx.jpg) no-repeat left top;
top:0px;
left:0px;
}
#sample01 ul li#right a:hover span{
background:url(xxx.jpg) no-repeat right top;
top:0px;
left:226px;
}
a:hover{border:none;}
-->
</style>
xhtmlソース
<div id="sample01">
<ul>
<li id="left"><a href="#">RedLine Magazine<span>このサイトのことです。</span></a></li>
<li id="right"><a href="#">REDLINE ブログ<span>管理者の別ブログです。あまり実用性はありません。</span></a></li>
</ul>
</div>
ちょっとだけ解説
まず画像を用意。上のソースではリンク部分のdiv id="sample01"の背景として表示させているが、imgタグでもcss側をごにょごにょすればなんとかなる気がする。
用意した画像
通常時
hover時
最初のhover時の読み込みチラツキが気になる方は全部１枚の画像にして背景の位置指定で切り替えてもいいと思う。お好みで。
手順としてはまずその部分を囲むエリアをid付きdivで囲み(ここではdiv id="sample01")position:relative;でhover時に画像を表示する際の基準点として指定しておく。
<li id="left"><a href="#">RedLine Magazine<span>このサイトのことです。</span></a></li>
ここでhover時に画像の表示エリアとして反応しているのはspanで囲まれた部分。個人的にspanを空で入れるのに気が引けたので簡単な説明文でも入れてみた。テキスト自体はcssで画面外へ。hover時画像の簡単説明なんかを入れてもスパムにはならんだろうと勝手に思っているが、そういうの嫌な方はhover時に画像下なんかにspan内のテキストが出現する感じにしてもいいと思う。
ポイントはIE6ではaタグ以外のhover指定が効かないのでaタグ内にspanを入れてしまうこと。また、cssソースの最後でhoverに対してborder:none;を指定いるのはIE6対策。 一応IE6.7、Firefox、NN、Operaでは検証済み。多分Safariも大丈夫な気がする。画像を作るのが面倒な場合はborderだけで意図する場所を囲ったりもできそうな予感。
