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

2011.5.21追記
新しく作ったjQueryロールオーバープラグインはこちら

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

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

CSSでロールオーバーを実装する際は、bodyにページ固有のidを振っておけば、ナビゲーション部分のHTMLを全ページ共通のものにしておいて、CSS側で今いるページのナビ画像だけ変更できた。でも、javascriptでロールオーバーを実装する際、今いるアクティブなページには、最初からロールオーバー状態の画像を使いたいなーと思っても、HTML側の画像のパスを、ロールオーバー後のものにするしかない。

つまり、共通のHTMLが使えない。何かいい方法がないか調べてみたけど、あまりそういった問題を取り上げた記事はないみたい。みんな、どうやってるの?

方法を考えてみました。

まず、ロールオーバーに使用するスクリプトですが、

input要素にも使えるjQueryのロールオーバープラグイン|Rewish様

上記のものがすばらしいので、使わせていただきます。Rewishさんのページは、デザインも、内容も、とっても勉強になり、個人的に大好きです。

このスクリプトは、ロールオーバーさせたい画像を指定して実行します。例えば、

<ul id="globalnavi">
    <li id="n01"><a href="n01.html"><img src="img/common/nav-01.gif" alt="ページ1" /></a></li>
    <li id="n02"><a href="n02.html"><img src="img/common/nav-02.gif" alt="ページ2" /></a></li>
    <li id="n03"><a href="n03.html"><img src="img/common/nav-03.gif" alt="ページ3" /></a></li>
    <li id="n04"><a href="n04.html"><img src="img/common/nav-04.gif" alt="ページ4" /></a></li>
</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要素を簡単に指定できるようにスクリプトを改造してみました。自分用ですが、せっかくなので以下よりダウンロードできます。

Downloaded DOWNLOAD - jquery.rollover.js

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

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