スライダー

SafariからFirefoxに乗り換えて早幾月。
もはや単なるブラウザの域を超えて、強力な制作・開発ツールとなっています。

ここでは、そんなFirefoxの機能を拡張・強化してくれるアドオンをご紹介。
基本的には普段仕事で（たまにプライベートでも）使っているものばかりなので、実際の使用感なんかを参考にしていただければ、と。

アドオンの基本的な使い方については、別の記事にまとめてあります。
ご参考まで。

この記事の続きを読む

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

オリジナル版

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

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

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

改良版

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

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

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

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

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

雑感

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

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

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

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