THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
画像置換
CSS
rollover
ロールオーバー
jquery

rollpver.png
CSSで実現するスマートなロールオーバー

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

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

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; });
    });
});

プレビュー

ロールオーバー画像

この方法は、JavaScriptを切ってしまっては動作しないが、
たとえ切っても通常の画像がvalid状態で表示可能なのが特徴。

HTMLにおいて、動作を表す部分はCSSではなく
JavaScriptなどで表現をするのが、
マークアップ的に一番妥当なのではないだろうか。
個人的に、最近はこの方法が一番多い。

どれを使うかは人それぞれ

一時画像置換をしている人はあまりいなかったようだが、
今でも画像置換でロールオーバーをさせている人は多くいる。
しかし、CSSで画面から文字を意図的に消すことが、
SEOやユーザビリティでデメリットとなることを忘れないで欲しい。

それらをふまえた上で、どれを使うかは人それぞれ。
ただ、動的な表現をする部分である以上、
個人的にはJavaScriptで表現する方法をおすすめする。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

私の知ってるロールオーバー・・・
Excerpt: 元気にしてますか?本日も行ってみましょう!目からウロコのロールオーバー情報です。...
Weblog: ロールオーバーのおいしい情報教えます!FX必勝法
Tracked: 2008-04-04 11:46

やっぱりロールオーバーって最高ですよ!
Excerpt: こんにちは。いつもブログを見てくれてありがとうございます。それでは早速今日のブロ...
Weblog: ロールオーバーのおいしい情報教えます!FX必勝法
Tracked: 2008-04-05 18:14

ロールオーバーってみんな気にならないのかな?
Excerpt: こんにちは。いつもブログを見てくれてありがとうございます。それでは早速今日のブロ...
Weblog: ロールオーバーのおいしい情報教えます!FX必勝法
Tracked: 2008-04-10 03:25

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。