オンマウスでの画像の変更について

ガジェットにかかわらずですが
HTMLでオンマウスの時に画像を変更したいときがあると思います。
そうするにはJavaScriptなどを使って
イベントを受取り処理することもできるのですが
スタイルシートを使っても行うことができます。

方法は通常画像、オンマウス画像、アクティブ画像を
1つの画像につなげちゃいます。
あとはずらして表示するのです。

メリットは画像読み込みは1回で済むのと
こっちの方がスマートで便利です。

デメリットはIEではサポートしていなく動かないです。
でも通常画像はちゃんと表示してくれるので
害はないと思います。

こんな形で記述します。
ボタンでの例です。
 <style>
  /**
   * 通常。
   */
  button{
   width:               15px;
   height:              15px;
   background-repeat:   no-repeat;
   background-position: 0 0;
   background-color:    transparent;
   border-style:        none;
   margin:              0;
   padding:             0;
   cursor:              pointer;
  }

  /**
   * オンマウス。
   */
  button:hover{
   background-position: 0 50%;
  }

  /**
   * アクティブ。
   */
  button:active{
   background-position: 0 100%;
  }
 </style>