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

動作ブラウザ 【 IE:-  NN:7.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 - - - - - - × × × × × - -

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

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