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

ロールオーバーとは

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

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

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

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

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

サンプル（画像にマウスポインタを乗せてください）

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

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

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

実はIE以外は一行目の「opacity:0.7」だけでいいのですが･･･
２行目の「filter」はIE6・IE8対策、
３行目の「-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です。

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

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

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

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

４行目に「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をつけてみるといいでしょう。