JavaScriptを使わずにやるimg要素のロールオーバーサンプル

本文へジャンプ

ナビの画像

ナビの背景画像

ナビの背景画像

XHTMLソース

<ul id="gNav">
<li class="productNav"><a href="/product/"><img src="./img/share/nav_product.gif" alt="製品情報" /></a></li>
<li class="serviceNav"><a href="/service/"><img src="./img/share/nav_service.gif" alt="サービス案内" /></a></li>
<li class="companyNav"><a href="/company/"><img src="./img/share/nav_company.gif" alt="会社情報" /></a></li>
<li class="pressNav"><a href="/press/"><img src="./img/share/nav_press.gif" alt="プレスリリース" /></a></li>
<li class="recruitNav"><a href="/recruit/"><img src="./img/share/nav_recruit.gif" alt="採用情報" /></a></li>
<li class="contactNav"><a href="/contact/"><img src="./img/share/nav_contact.gif" alt="お問い合わせ" /></a></li>
</ul>

CSS

/*----------------------------------------------------
	#gNav
----------------------------------------------------*/
#gNav {
	float: left;
	width: 800px;
	padding-left: 20px;
}

#gNav li {
	float: left;
	margin-right: 1px;
}

#header #gNav {
	background: url(../img/share/bg_nav.gif) no-repeat left bottom;
}

#header #gNav a {
	display: block;
	width: 129px;
	height: 55px;
}

#header #gNav a:hover {
	background: none;
}

.productBody #header #gNav li.productNav a img,
#header #gNav li a:hover img {
	width: 0;
	height: 0;
}