画像を使ったナビゲーション

通常時とマウスオーバー時と現在地表示時の画像を一枚画像で切替ます。

サンプルサイトの場合、通常時とマウスオーバー時と現在地表示時の画像を縦に並べて一枚画像にしています。
たてのサイズがひとつ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;}