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

yuga.js で、外部リンクを別ウィンドウで開く機能を area 要素にも適用する方法。

小ネタです。 JavaScript が分かる人なら何の造作もないことなんですけど、分からなくて困ってる人が居るかも知れないので一応メモ。

no image

jQuery で奇数番目・偶数番目を指定するときの注意点。

ちょっとはまったのでメモ。 リストやテーブルに対して、jQuery で奇数番目・偶数番目の要素を指定するときの注意点です。 例えば、以下のような HTML があるとします。 <ul id=”li …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

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

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

no image

リンクしているパスから JavaScript(jQuery)でファイル名を抽出する方法。

PHP には「basename()」や「dirname()」という便利な関数があり、それぞれファイル名とディレクトリ名を、指定したパスから抽出することができます。 しかし、JavaScript にそん …