今更聞けないJavaScriptを使用しないCSSマウスオーバー

css
  • 今仕事で作成しているウェブサイトのマウスオーバー画像として以下のようなスタイルを採用している。
<a href="form.php" id="form"><em>ログイン</em></a>

a#form {
  float: left;
  display: block;
  margin: 0 0 0 0;
  background-position: 0 0;
  width: 44px;
  height: 21px;
  background: url("form.png") no-repeat;
}

a#form:hover {
  background-position: 0 -21px;
}

a em {
  display: none;
}

  • ボタンサイズが 44x21 の場合、ボタン画像は 44x42のサイズで通常の画像とマウスオーバー画像を縦に連結する。
  • width/height で表示画像サイズを固定し、background-position で切り出す位置を指定することにより、CSSだけでマウスオーバーを実現できる。(この際、縦座標はマイナス値を指定する)
    • この手法の利点：
      • マウスオーバー画像の先行読み込みが必要無い
      • JavaScript無効環境でも動作する
      • アニメーションGIFの動きを中断せずにマウスオーバーできる
    • 欠点:
      • 画像サイズ変更時にCSSの変更が必要になる
    • というあたりか。
  • 画像ファイルの連結生成＋CSSの生成をスクリプト化して、画像変更時に表示用ファイルを再生成するという手もあるが。
  • emタグを display:none しているのはCSS無効時の案内表示用。
  • もちろん以下のような汎用的な定義を行い、a タグのstyle で width、height、background-imageを指定するのも有効
<a class="css_rollover" style="width: 44px; height: 21px; background: url(form.png) no-repeat;" ><em>ログイン</em></a>

a.css_rollover {
	background-position: 0 0;
}

a.css_rollover:hover {
	background-position: 0 -100%;
}

a.css_rollover em {
	display: none;
}