btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

JavaScript・jQuery

JavaScriptによるシンプルなロールオーバー。

投稿日:

ものすごくシンプルで使いやすいロールオーバーをご紹介。
最近、特別な理由がない限りこの方法でロールオーバーの設定をしています。

オリジナル版

使うのは「CSS HappyLife」さんの「ソースがシンプルなJSによるロールオーバー」で紹介されているJavaScript。
使い方はごく簡単で、画像を用意してJSファイルを外部ファイルとして読み込むだけ。
画像ファイル名の最後が「_on」であればロールオーバー用、「_off」であればロールアウト(通常)用の画像として認識し、勝手に表示を切り替えてくれるのです。

特別なタグや属性を加えることなく、つまりソースをきれいに保ったままスマートに動作します。

「_on」「_off」を付けるだけというのも直感的でいいですね。
(ちなみに、JavaScriptをいじればこのキーワード(?)も変えられます。)

改良版

↑のスクリプトをベースとした改良版もあります。
(「Le Arche」さんの「JavaScriptメモ(3):しんぷるロールオーバー」で紹介されています)

改良点は、動作する範囲をIDで指定できるようにしたこと。
元々はページ内の画像すべてに反応してしまっていたので、それを任意の範囲に限定しようということですね。
小さなことではありますが、僕的にはものすごく重宝しています。

ただ、ロールオーバーしたい画像がいろんなところに散らばっている場合、どうしても複数のIDを指定する必要があります。
それに、指定したIDがページ内に無いとエラーが発生するため、複数のページで異なる範囲に指定する必要がある場合、そのパターン分のJSファイルを用意する必要もあったりします。

というわけで、場面に応じてオリジナル版と改良版を使い分けているのが実際のところ。
だいたいはオリジナル版だけで事足りるのですが、画像の点数が多くなったり「_on」「_off」って付けちゃいそうなページを作っていたりするときは、改良版を使ったりします。
(まぁスクリプトをいじれば動作条件を変えられるので、本当はオリジナル版だけで良いのかもしれませんが……)

今思うと、DreamWeaverのあのゴッツいスクリプトが随分太っちょに思えますね。
きれいなソース、万歳!

雑感

ロールオーバーにはCSSを使う方法も多々ありますが、僕はどうもはあまり好きではありません。

イチイチclass名を付けないといけなかったり、text-indentでテキストを-9999pxまで飛ばしたり、一つのデータにon/off両方の画像を入れないといけなかったり、まぁ何かと手間がかかるワケです。
もちろん作り手の手間だけじゃなく、alt属性を設定できなかったり「CSS:on, 画像:off」の設定だとテキストが表示されなかったりするため、ユーザビリティ/アクセシビリティ的によろしくないという話もよく目に耳にします。
動作を直感的につかみにくいですし。

できればソースを保ったままでロールオーバーできないかなぁ、と常々思っていたところ、まさに渡りに船。
理想通りの方法が見つかって今に至るわけです。

CSS HappyLifeさん、Le Archeさんに感謝!







-JavaScript・jQuery
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQueryとprototype.jsを同時に使うには

最近、JavaScriptのライブラリを使って動きを付けたりすることが多くなってきました。 特に多用するのが、ライブラリの代表格である「jQuery」と「prototype.js」の2つ。 ただ、どち …

no image

アクセシブルなスライダーをJavascriptで実現 – 「Accessible News Slider」

ここで言う「スライダー」とは、「同じ構造の要素を限られたスペースで表示するために、要素ごとスライドさせて表示させるためのもの」という意味。 (↓こんなのです) 音量を調整するような「つまみ」のことでは …

no image

IE6、IE7 で「識別子、文字列または数がありません」というスクリプトエラーが発生する。

最近 jQuery を使うことが多く、それに伴ってデバッグ作業が増えてきました。 その中でもちょくちょく目にするのが「識別子、文字列または数がありません」というエラー。 主に IE6、IE7 で発生し …

no image

JSライブラリ「jQuery」と「prototype.js」の特徴。

数あるJavascriptライブラリの中で代表的な「jQuery」と「prototype.js」。 今までは何らかの機能が必要になった際にググったり本で調べたりして、見付けたものをベースに何とか形にし …

no image

yuga.js で、別ウィンドウで開かないドメインを追加する方法。

「yuga.js」という jQuery プラグインが便利すぎて、最近ではほとんどデフォルトで使わせていただいています。 中でも重宝しているのが、「外部リンクの場合は別ウィンドウで開く」という機能。 余 …