.: jQueryのロールオーバーで共通のHTMLを使ってアクティブページを実現

javascript側で現在表示されているアクティブページが指定できるjQueryのロールオーバープラグイン。

CSSでロールオーバーさせたほうが、何かと便利なんだけど・・・。

現在のページはどうやって指定するの？

CSSでロールオーバーを実装する際は、bodyにページ固有のidを振っておけば、ナビゲーション部分のHTMLを全ページ共通のものにしておいて、CSS側で今いるページのナビ画像だけ変更できた。でも、javascriptでロールオーバーを実装する際、今いるアクティブなページには、最初からロールオーバー状態の画像を使いたいなーと思っても、HTML側の画像のパスを、ロールオーバー後のものにするしかない。
つまり、共通のHTMLが使えない。何かいい方法がないか調べてみたけど、あまりそういった問題を取り上げた記事はないみたい。みんな、どうやってるの？

方法を考えてみました。

まず、ロールオーバーに使用するスクリプトですが、
input要素にも使えるjQueryのロールオーバープラグイン｜Rewish様
上記のものがすばらしいので、使わせていただきます。Rewishさんのページは、デザインも、内容も、とっても勉強になり、個人的に大好きです。
このスクリプトは、ロールオーバーさせたい画像を指定して実行します。例えば、

</ul>

というHTMLだった場合、

$(function(){
 $('#globalnavi li a img').rollover();
});

こんな感じで指定してあげれば、該当する画像が全てロールオーバーするようになります。
これを、共通のHTMLを使ったまま、今いるページの画像をロールオーバー後のものにするやり方をがんばって考えてみました。例えば、今いるページが「ページ3」だった場合、

$(function(){
 $('#globalnavi li:not(#n03) a img').rollover();
 $("#n03 a img").attr("src","img/common/nav-03_on.gif");
});

こんな感じに記述すれば、HTMLを変更することなく、ページ3のナビゲーション画像を、ロールオーバー後の画像にできます。#n03の部分だけロールオーバーさせないようにして、画像を差し替えています。
ここまでやって気づいたのが、HTML側は変わらないけど、javascript側が変わるので、おんなじだよねってこと。しかも、なんか記述が面倒くさいし。だから、誰もやんなかったのね。

jQueryロールオーバープラグインを改造

需要はともかく、上記を踏まえて、jQueryを勉強する目的で、アクティブにしたいimg要素を簡単に指定できるようにスクリプトを改造してみました。自分用ですが、せっかくなので以下よりダウンロードできます。

DOWNLOAD - jquery.rollover.js

$(function(){
 $('#globalnavi li a img').rollover('#globalnavi li#n03 a img');
});

使い方は、おんなじです。引数で、アクティブな要素を指定します。すると、その画像のパスに自動的に「_on」が不可されます。オリジナル版であった「_on」の部分を好きな文字列に変更できる機能は、自分が使う場合は必要なかったので、消しました。残せよ！って気もしますが、まあ、いいでしょう。

2011/04/03