CSSでマウスを乗せる(onmouse)と画像が変わるコード〜１枚画像で部分的に画像を変える〜

CSS

エレガンスにマウスを乗せると画像を変更しよう。
中級レベルCSSで、多分入門レベルでは若干きついです。
せっかくなんでナヴィゲーションを作ってみます。
まず、例のごとくCSSを定義します。

<link rel="stylesheet" type="text/css" href="css/navigation.css"/>|


この時点ではCSSはお決まりのコードだけで大丈夫

* {
	margin: 0;
	padding: 0;
}


次に大枠をセット！！
ナヴィゲーション全体を囲むDivです。

<div class="navigation">
</div>


こいつには必要事項をしっかりセット！！
保守が面倒くさいので、marginやpaddingはここでかけるようにしています。

.navigation {
	width:180px;
	float:left;
	text-align: left;
	margin-bottom: 40px;
	margin-right: 10px;
}


続いてリストを作成！！
このとき、カテゴリ+ヘッドを含むリストを作成してください。
僕はめんどくさいので１行だけ。
idやclassの使い分けはご自由に・・・。
僕は以降の作業で「left_navi」使いますんで、
こいつをclassにしています。

<ul class="left_navi">
    	<li id="test"><a href="dfa">とりあえずテスト</a></li>
</ul>

HTMLはこれで終了！！
ここからがCSSの楽しい部分です。


やりようは僕のだけじゃなく、
たくさんありますので、
ご自身の判断に任せます。


1.まずはリストの定義です。
リストは通常中黒になりますが、
中黒を除去します。
あとはfloatで位置をしっかり入れます。

.navigation .left_navi {
	float: left;
	list-style-type: none;
}


2.次はリストが縦並びか横並びか定義します

.navigation .left_navi li{
	float: none;
	text-align: left;
}


3.次はテキストが邪魔なんで、
テキストをぶっ飛ばします。
前にブログに書いたあれです

.navigation .left_navi a {
	text-indent: -9999px;
	display: block;
	width: 178px;
}


4.次は通常に表示されているはずの画像を書きます。
aタグに対して、画像の座標を当てていきます。
以下の感じで記入しています。
・画像の位置
・画像の座標
・高さ

.navigation .left_navi #test a{
	background-image: url(../img/common/navi/navi.jpg);
	background-position: 0px -45px;
	height: 32px;
}


5.最後にマウスが重なった時に表示されているはずの画像を書きます。
aタグに対して、画像の座標を当てていきます。
以下の感じで記入しています。
・画像の位置
・画像の座標
・高さ

.navigation .left_navi #test a:hover{
	background-image: url(../img/common/navi/navi.jpg);
	background-position: -178px -45px;
	height: 32px;
}


こいつで完成！！


実行結果は・・・・・
各々実装してみてくださいな。


あくまで一つの例でしかないので、
他にあったら教えてください。