CSSで実現するスマートなロールオーバー
暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。
長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。
サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。
まずサンプルのXHTMLソース
<ul>
<li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li>
<li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li>
<li class="cssBtn"><a href="/css/"><img src="css_a.gif" alt="css" /></a></li>
<li class="htmBtn"><a href="/html/"><img src="html_a.gif" alt="html" /></a></li>
</ul>
ul,li要素にimg要素が入っているシンプルなソース。
次にCSSソース
li{
list-style-type:none;
width:150px;
height:50px;
float:left;
}
li img{
border:0;
}
li.ajaBtn{
background:url(./ajax_b.gif);
}
li.amaBtn{
background:url(./amazon_b.gif);
}
li.cssBtn{
background:url(./css_b.gif);
}
li.htmBtn{
background:url(./html_b.gif);
}
li a{
display:block;
width:150px;
height:50px;
}
li a:hover {
background-color:transparent;
}
li a:hover img{
visibility:hidden;
}
li要素の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にimg要素のvisibilityをhiddenにして対応しています。
ポイントはある程度大きいボタンを利用する場合は、a要素のheightのサイズをとっておくこと。
これ、はやりそうな気がします。
追記(2007/06/18)
ie6で動かないの指摘を受けて、a:hover {background-color:transparent;}を追加しました。
関連エントリー
画像置換
cssで画像をプリロードする方法(改
一番簡単な画像置換の方法
画像置換でメニューを作る
画像置換に関する考え方
BIR-もうひとつの画像置換