CSSのみで画像のロールオーバー(その1)

画像のロールオーバーって色々やり方ってあると思うんですが、今回はソースも短くて済む手軽な方法を紹介したいと思います。

Domo Page

…ここからが続き

CSSのみで画像のロールオーバー(その1)解説

ナビゲーション画像

デモページで使用している一枚画像はこんな感じです。

この画像をCSSのbackground-positionで表示する場所を変更して、ロールオーバーさせているって感じです。

XHTML

<ul id="globalNavi">
<li class="gnavi01"><a href="#header" title="ホーム">ホーム</a></li>
<li class="gnavi02"><a href="#header" title="サービス">サービス</a></li>
<li class="gnavi03"><a href="#header" title="リンク">リンク</a></li>
<li class="gnavi04"><a href="#header" title="会社概要">会社概要</a></li>
<li class="gnavi05"><a href="#header" title="お問い合わせ">お問い合わせ</a></li>
<!--/ #globalNavi--></ul>

CSS

#globalNavi	{
	width: 550px;
	margin-bottom: 20px;
}
#globalNavi a	{
	width: 110px;
	height: 50px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
#globalNavi:after	{ height:0; visibility: hidden;	content: "."; display: block; clear: both; }
#globalNavi li	{
	float: left;
}
#globalNavi .gnavi01 a	{
	background: url(image/g_navi01.jpg) no-repeat;
}
#globalNavi .gnavi02 a	{
	background: url(image/g_navi02.jpg) no-repeat;
}
#globalNavi .gnavi03 a	{
	background: url(image/g_navi03.jpg) no-repeat;
}
#globalNavi .gnavi04 a	{
	background: url(image/g_navi04.jpg) no-repeat;
}
#globalNavi .gnavi05 a	{
	background: url(image/g_navi05.jpg) no-repeat;
}
#globalNavi a:hover	{
	background-position: 0 -50px;
}

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article