CSSで画像をロールオーバーする方法その1

CSS

Javascriptを使わずにCSSだけを使って画像をロールオーバーする方法はいくつかありますが、ここでは2つ紹介します。まずは1つめ。

text-indentを使う方法です。

text-indentを使う方法

まず画像に使っているテキストを普通に打ちます。

<p><a>画像</a></p>

そして次にCSSでこう指定します。


p {
	width: 300px; /*--画像と同じ幅--*/
	text-indent: -9999px; /*--テキストを表示されないようにします--*/
	}

a {
	height: 150px; /*--画像と同じ高さ--*/
	display: block; /*--リンクの領域を広げる--*/
	background-image: url(最初に表示する画像); /*--最初に表示する画像を背景で表示--*/
	outline: none; /*--Firefoxだとクリック時に点線が出るので消す--*/
	}
	
p a:hover {
	background-image: url(ロールオーバーの画像); /*--ロールオーバーの画像を表示--*/
	}
	

補足

text-indent: -9999px;
背景を指定しただけだと、テキストが上に乗っかった状態で邪魔です。そこでtext-indentを使って画面の見えない場所へ 飛ばしてしまいます。値は-9999pxでなくても構いませんが、あまり小さいと画面の端に見えてしまうかもしれません。
height: 150px;
画像と同じだけの高さを指定します。

これでロールオーバーの完成です。

問題点

javascriptを使わずCSSだけでできるこの方法ですが、問題点もあります。

  • ブラウザの設定でCSSを切り画像非表示にされるとそこには何も表示されない

その他

ボタン画像を一枚で作成してオンマウスした時に位置をずらすやり方もいいかもね!

確認ブラウザ
  • IE6.0
  • Firefox2.0.0.11
  • Opera9.01