cssとimg要素を使ってロールオーバーを作成する：HTMLの基本から勉強してみる：So-netブログ

	ブログをはじめるログイン

ホーム »
CSS »
cssとimg要素を使ってロールオーバーを作成する

« デジハリ講義終了後のデジハリオ.. | jQueryを使ってプルダウン.. »

cssとimg要素を使ってロールオーバーを作成する

以前CSSスプライトを使ってロールオーバーを作るやり方を紹介していましたが
あの場合、text-indentを-9999pxにしていたため
ブラウザの設定でCSSを使って、画像を表示させないようにした場合
画面に全く表示がされません。

もっといいやり方がありそうな気がしますが
img要素を使って初期表示には、必ず何か画面に表示されるようにする
Javascriptを使わないロールオーバーの方法です。

htmlをこんな感じで記述します。
<p><a href="rollover_sample.html"><img src="../images/cart_button.png" width="115" height="20" alt="カートを見る"></a></p>

img要素のalt属性に値を設定しているので画像が表示されない場合でも
なにがあったかが分かるようになります。
マウスが画像に重なった時に、img要素の画像を表示させないで
a要素の背景にある画像を表示させるようにします。

今回のサンプルで設定したCSSは次のようになります。
a {
display: block;
margin: 0px;
padding: 0px;
height: 20px;
width: 115px;
overflow: hidden;
background-image: url(../images/cart_button_rollover.png);
background-repeat: no-repeat;
background-position: 0px 0px;
position:relative;
}

a img {
border:0px;
}

a:hover {
background-color:transparent;
}
a:hover img {
position:relative;
top:-20px;
}

カーソルがボタンの上にある場合に、img要素の画像の位置を移動して
画面に表示させないようにすることで
a要素の背景の画像を画面に表示させます。

a:hover {
background-color:transparent;
}
という設定がありますが、IE6の場合背景色を設定していないと
なぜかうまくいかなかったので設定しています。
なんらかの色が設定されているといいようなので、透明色である必要はないようです。

この設定を使ったサンプルです。
これだと、ブラウザの設定でCSSを使って、画像を表示させないようにした場合
初期表示時は画面に文字が表示されます。
(カーソルを乗せると画面から消えてしまいます)
もっといい方法があれば教えてください。