マウスオーバーで画像を入れ替える(bg-pos)

■動作ブラウザ　【 IE:5.0　 NN:6.0　 Safari:1.0】　■CSSバージョン【-】
Internet Explorer Netscape Navigator Opera iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 7.x 2.x 1.x
Windows × × - ○ ○ ○ × × × × ○ ○ ○ - -
Macintosh × × × ○ - - × × × × ○ ○ ○ × ○
UNIX - - - - - - × × × × ○ ○ ○ - -

ポイント a.type1:hover {　〜　}
説　　明 マウスオーバーで画像を入れ替えるには:hoverを使います。:hoverの場合と、そうでない場合の定義を行います。入れ替える画像は上下に２枚用意しbackground-positionで座標を変更することで実現できます。
サンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>マウスオーバーで画像入れ替える(bg-pos)</title>
<style type="text/css"><!--
a.type1 {
background-image:url(bg.gif);
background-position: 0px 0px;
width:160px;
height:24px;
display:block;
}
a.type1:hover {
background-position: 0px 24px;
};
--></style>
</head>
<body>
<a href="#" class="type1"></a>
</body>
</html>
補足説明 Opera 6では動作しません。

■サンプルを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!