マウスオーバーで画像を入れ替える

動作ブラウザ 【 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の場合と、そうでない場合の定義を行い、入れ替える画像をbackground-imageで指定します。
サンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>マウスオーバーで画像入れ替え</title>
<style type="text/css"><!--
.type1 {
background-image:url(bg1.gif);
width:160px;
height:24px;
}
.type1:hover {
background-image:url(bg2.gif);
};
--></style>
</head>
<body>
<div class="type1">
</div>
</body>
</html>
補足説明 なし

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