通常時とマウスオーバー時と現在地表示時の画像を一枚画像で切替ます。
サンプルサイトの場合、通常時とマウスオーバー時と現在地表示時の画像を縦に並べて一枚画像にしています。
たてのサイズがひとつ45pxで三つがセットになっているので135pxの高さの一枚画像となります。
その画像をCSSで画像の表示位置を変更し画像を切替しています。
overflow:hidden; position:relative;
でfloat解除。
HTMl
<div class="mod_Gnavi003"> <ul> <li><a href="#"><img src="GlobalNavi_003a.jpg" width="150" height="135" alt="Menu01" /></a></li> <li><a href="#"><img src="GlobalNavi_003b.jpg" width="149" height="135" alt="Menu02" /></a></li> <li class="mod_current"><img src="GlobalNavi_003c.jpg" width="149" height="135" alt="Menu03" /></li> <li><a href="#"><img src="GlobalNavi_003d.jpg" width="149" height="135" alt="Menu04" /></a></li> </ul> <!--mod_Gnavi003_end --></div>
CSS
.mod_Gnavi003 ul{ width:597px; overflow:hidden; position:relative; } .mod_Gnavi003 ul li{ height:45px; float:left; overflow:hidden; } .mod_Gnavi003 ul li.mod_current img{ margin-top:-90px; display:block; /* IE6隙間防止 */ } .mod_Gnavi003 ul li a{ display:block; } .mod_Gnavi003 ul li a:link {} .mod_Gnavi003 ul li a:visited {} .mod_Gnavi003 ul li a:hover {margin-top:-45px;} .mod_Gnavi003 ul li a:active {margin-top:-45px;}