画像置換-visibilityはimg要素がhoverのときにvisibility:hidden;を行い背景の画像を表示する手法になります。
サンプルの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にして対応しています。
また、IE6はhover時のstyleが何も記述されていない場合、hoverの子孫セレクタが適応されないというバグがあるため、hover時にbackground-color:transparent;を設定します。
ポイントはある程度大きいボタンを利用する場合は、a要素のheightのサイズをとっておくこと。