cssロールオーバー画像入替

cssで ロールオーバーをする方法の解説です。
(ロールオーバー→マウスカーソルをリンクの上に持ってきた時。マウスオーバーとも言います)

jsでやるからいいよとか、ロールオーバーてそもそも必要なの?とかは置いておいて
今回は、前回書いた背景をスライドさせる方法ではなくて、画像だけで作ったメニューを、マウスオーバーした時に入れ替える方法です。

色々な方法がありますが、私なりに分かりやすい方法を紹介する事にしました。

↓サンプル↓

↓HTMLタグはこんな感じ。シンプルな横並びメニューです。


<ul>
		<li class="m1"><a href="#">メニュー1</a></li>
		<li class="m2"><a href="#">メニュー2</a></li>
		<li class="m3"><a href="#">メニュー3</a></li>
</ul>

まず、メニュー画像を用意します。

メニュー全体の背景を作って、ulの背景にしてしまいます。


【menu_bg.jpg】

余白ごと、ぜーんぶ背景にしちゃいます。
デザインを作る時は、ちゃんと余白とかも均等に整列させて作りましょう(^^

次に、ロールオーバー(hover)した時の画像をそれぞれ用意します。
【menu1.jpg】
【menu2.jpg】
【menu3.jpg】
これは、それぞれバラバラに用意しています。

↓そして、以下CSSを記述


/* ulに全体の背景を設定 */

ul {
	background: url(menu_bg.jpg) no-repeat left top;
	width: 500px;
	height: 40px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}


/* liを横並びにする・余白をmarginで入れる */

li {
	margin: 0px 6px 0px 0px;
	padding: 0px;
	float: left;
}


/* aをメニューの大きさに設定・ブロック要素(display: block)に
	文字を欄外に飛ばして、非表示(overflow: hidden)に */

a{
	display: block;
	height: 40px;
	width: 150px;
	text-indent: -1000em;
	overflow: hidden;
}


/* それぞれのホバー時の背景をかぶせて設定 */

.m1 a:hover {
	background: url(menu1.jpg) no-repeat left top;
}

.m2 a:hover {
	background: url(menu2.jpg) no-repeat left top;
}

.m3 a:hover {
	background: url(menu3.jpg) no-repeat left top;
}

/* */

上の例では、ulやaタグに直接cssを書いていますが
全部のulやliがそうなってしまわないように、ID名とかつけて 固有の範囲だけに効くようにして下さいまし。

理屈としてはulに全体の背景を設定して、
マウスオーバーした時に画像をaの背景に設定してかぶせちゃうのです。

ポイントは30行目の display: block; の部分で、ブロック要素にしてあげておいて
画像の高さ・幅をそのまま設定し、テキスト文字の「メニュー1」を、 text-indent: -1000em; で、
左の遠くへ飛ばし、はみ出した部分はoverflow: hidden;で表示しないよ~としてあげている所です。

-1000emにしてますが、単位はpxでも何でも構いません。
あと、リスト(li)にいれているmargin(19行目)はaタグの方に書いてもよかったかな~

どうでしょう?出来ましたか?

・・・お~!やったね、おめでとー!

色々方法はありますがcssで出来るに越したことはないかなとも思います。
もっと簡単な方法があれば教えて下さい。

あと、これだけじゃなんなので
ロールオーバー画像をいちいち作らないで、透明度を変えてそれっぽく見える方法も書いておきます。


a:hover img{
	opacity:0.8;
	filter: alpha(opacity=80);
}

CSSに、これを入れるだけ。

HTMLはこんな感じで普通にimgを置いてリンクしてる場合です。

<a href="#"><img src="menu1.jpg" alt="" /></a>

これも全部のimgが透過して欲しくなければ、IDを付けましょう。