CSSを使用した画像のロールオーバー

ユーザーのアクションや状態に応じてメニューの表示が切り替わる仕組みを作ります。

「通常の状態」「オンマウスでロールオーバーさせる」「現在いるページをユーザーに示す」といった3段階に挑戦したいと思います。

CSSによる画像のロールオーバーのには様々な方法がありますが、ここでは1枚の画像をliのa要素の背景にしき、その開始位置を細かく指定することで、あたかも画像が切り替わったように見せる方法を説明します。

 

この方法のメリットは、

  1. ボタンを複数用意しなくても1枚画像を用意すればすむこと。
  2. ファイルサイズの縮小になる。
  3. 変更があった場合の修正が簡単。
  4. ブラウザはオンマウス時の背景画像を先読みしておけるため、画像を新たに読み直すといった必要がない。
    →オンマウス時に瞬時に画像が切り替わる。
    もたつきのない軽快な動作を得ることができるテクニックです。

【text-indentプロパティ】

text-indentindentプロパティは、ブロックレベル要素の中にあるテキストの一行目のインデント幅を指定する際に使用します。

インデントにはマイナスの値を指定することもできます。

ここでは、text-indent:-9999px;を使いテキストをウィンドウ外に飛ばしてしい見えなくするようにしています。

このtext-indentindentを使い画像に置き換える手法は、よく使われていますが、スパム的な手法とも言われていますので多用は禁物です。