【CSS】3行でIEも対応!簡単画像ロールオーバー

【CSS】3行でIEも対応!簡単画像ロールオーバー

ロールオーバーとは

ロールオーバーとは、リンクを貼られた画像にマウスポインタを乗せたときに画像が切り替わる仕組みです。画像の色が変わったり、画像の文字が変わったり、ボタンを押したようにへこんだりする効果が多いです。

ロールオーバーを取り入れると「この画像はリンクなんだ」とわかりやすくなります。また、ユーザーは自分のアクション(マウスを動かした)に対して反応が返ってくる(画像が切り替わった)ことに強い満足感を感じるので、ロールオーバーはサイトへの好印象につながります。

リンク画像にロールオーバーを設定する場合、普通は2種類の画像(通常表示の画像とマウスポインタが乗ったときの画像)を用意し、CSSやJavascriptで切り替えるのが一般的ですが・・・
ロールオーバーを設定したい全ての画像を2種類ずつ用意するのはけっこう大変です!

そこで、1つの画像と3行のCSSで実現する簡単・手抜きロールオーバーの方法を紹介しましょう。

不透明度を変えてロールオーバーを表現する

このロールオーバーの仕組みはいたってシンプルで、リンクが貼られた画像にマウスポインタが乗ったときに、画像の不透明度を下げ、画像を明るくすることでロールオーバー効果を演出します。

サンプル(画像にマウスポインタを乗せてください)
CSSロールオーバーサンプル

a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
}

サンプルではマウスポインタが乗ったときに画像の不透明度を100%から70%に変えています。opacityの数値を変えればロールオーバー時の透明度を変えることができ、数値が小さいほど変化が大きくなります。

この方法ならロールオーバー用の画像を新たに用意しなくても1つの画像でロールオーバー効果が実現でき、たったの3行でそう古くないIE・Firefox・Chrome・Safari・Operaに対応できます。

実はIE以外は一行目の「opacity:0.7」だけでいいのですが・・・
2行目の「filter」はIE6・IE8対策、
3行目の「-ms-filter」はIE7対策です。
opacityが通じないIEのためにフィルターを使って透明度を変化させています。

ロールオーバーになる画像を限定する

上のCSSでは、サイト内のリンクが貼られた全ての画像にロールオーバー効果がつきます。ロールオーバーになる画像を限定するにはidやclassを使いましょう。

特定範囲の画像にだけロールオーバー効果をつける

#navi a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
}

#navi内のリンク画像のみロールオーバー効果がつきます。#naviには該当するidを入れてください。classでもOKです。

ロールオーバー効果をつける画像を1つ1つ指定する

a:hover img.hoverimg {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
}

class名に「hoverimg」をつけたリンク画像のみロールオーバー効果がつきます。class名は何でもOKです。

この方法の難点

この不透明度を利用したロールオーバーの難点は、画像の背景に画像があった場合、背景画像が透けてしまうことです。透明にしているから当然なのですが・・・背景色が白のときが一番きれいだと思います。

ロールオーバー用の画像を用意したときほど自由なロールオーバー効果は演出できませんが、簡単にサイト内のすべての画像にロールオーバーを設定することが出来るとても便利な方法です。

IEでロールオーバーがきかない場合のおまじない

4行目に「zoom:1;」を追加しましょう。

a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
	zoom:1;
}

zoom:1の詳細は割愛しますが、古いIEが抱えているCSSのバグを回避する魔法のおまじないです。IE独自のCSSで悪影響もなく、ロールオーバーに限らず、IEでうまくCSSが働かない場合は、ためしにzoom:1をつけてみるといいでしょう。