マウスオーバー時にスタイルシートで画像を切り替える

説明

マウスオーバー時に処理するには:hoverを使います。Internet Explorerでは<a>タグしか反映されませんが、他のブラウザでは(Firefox, Opera, Safariなど）、いろいろなタグやクラスに設定することができます。マウスオーバー時に画像を切り替えるにはbackground-imageで表示する画像を指定します。画像の表示位置をずらして切り替えたように見せる方法もあります。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>Sample</title>
<style type="text/css"><!--
.testBtn {
background-image:url(btn1.jpg);
width:64px;
height:32px;
}
.testBtn:hover {
background-image:url(btn2.jpg);
width:64px;
height:32px;
}
--></style>
</head>
<body>
<h1>Sample</h1>
<p>
マウスオーバー時、スタイルシートで画像を切り替える<br>
<div class="testBtn"></div>
</p>
</body>
</html>