二つの画像とCSSやjQueryで表現する３種類のロールオーバー

2008/04/03

カテゴリ：: CSS

タグ：: ロールオーバー; rollover; CSS; jquery; 画像置換

「CSSで実現するスマートなロールオーバー」

昔の記事ばかり参考にしているのですが、
ロールオーバーの仕方を今一度考えてみようと思います。

今回は、CSSを使っての方法２種類と、
jQueryを使っての方法の合計３つを紹介します。

imgを直接ロールオーバー

<img />で指定したイメージ画像を、
直接ロールオーバーする方法です。

HTMLソース

<p><a href="#"><img src="rollover.gif" alt="rollover" /></a></p>

今回のはボタンなどのイメージで使ってみる用に
p要素で囲んだimgのロールオーバーでやってみます。

CSS

img{
    border: none;
}
p{
    background:url(rollover_on.gif) no-repeat 0 0;
    display:block;
    width:235px;
    height:87px;
}
p a:hover {
    background-color:transparent;
}
p a:hover img{
    visibility:hidden;
}

プレビュー

この方法のいいところは、CSSでロールオーバーしているため、
JavaScriptが動かない環境でも動作する点である。
ボタンのロールオーバーなどで使用するのがいいかなと思う。

CSSの指定によっては、動作がずれる場合などもあるので、
他の要素と十分注意しながら指定したほうがいい。

画像置換でロールオーバー

画像置換でのロールオーバーは
背景画像を入れ替えるロールオーバー。
文字自体はCSSで消されるようにCSSで制御されている

HTMLソース

<p><a href="#">画像置換</a></p>

今回のはHTML部分は文字になっていて、
背景にてロールオーバー画像が埋め込まれている。
ポイントはa要素でwidthとheightを指定して、
displayをblockに指定している点でしょう。
文字の消し方は、text-indentで-9999pxを指定するだけ。

CSS

p{
    width:235px;
    height:87px;
    text-indent:-9999px;
    background:url("rollover01.gif") top left no-repeat;
}
a{
    display:block;
    width:235px;
    height:87px;
    text-indent:-9999px;
    background:url("rollover01.gif") top left no-repeat;
}
a:hover{
    background:url("rollover01_on.gif");
}

プレビュー

画像置換

この画像置換、CSSがONの状態で、画像を非表示にすると、
画像も文字も見えなくなってしまうという事態になる。
ユーザビリティ的に考えて、あまり用いないほうがよさそうである。
またSEO的に考えても、意図的に文字を消す行為が、
スパム行為としてとらえられて、
いつ減点されるかわからないので、
あまり使わないほうがやはり妥当だろう。

jQueryを使ってロールオーバー

最後はjQueryを使ってのロールオーバー。
jQueryを使うと、指定するのがとても楽で
しかもページ全体単位でも設定が可能なので
かなり重宝する方法だと思う。
JavaScriptを切った環境でも、ロールオーバーはしないが、
validで表示されるのも魅力一つといえる。

HTMLソース

<p><a href="#">
    <img class="rollover" src="rollover.gif" alt="rollover" />
</a></p>

一つ違う点を上げるとしたら、
Domを扱いやすくするために、imgにclass指定をしておくことだ。
今回はclass="rollover"をつけた画像がロールオーバーするようになっている。そして指定するのはCSSではなくてJavaScriptの方である。

JavaScript

$(document).ready(function(){
    $("img.rollover").each(function() {
        var off = this.src;
        var dot = this.src.lastIndexOf('.');
        var on = this.src.substr(0, dot) +
            '_on' + this.src.substr(dot, 4);
        $(this).hover(
            function() { this.src = on; },
            function() { this.src = off; });
    });
});