javascript側で現在表示されているアクティブページが指定できる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要素を簡単に指定できるようにスクリプトを改造してみました。自分用ですが、せっかくなので以下よりダウンロードできます。
DOWNLOAD - jquery.rollover.js$(function(){
$('#globalnavi li a img').rollover('#globalnavi li#n03 a img');
});
使い方は、おんなじです。引数で、アクティブな要素を指定します。すると、その画像のパスに自動的に「_on」が不可されます。オリジナル版であった「_on」の部分を好きな文字列に変更できる機能は、自分が使う場合は必要なかったので、消しました。残せよ！って気もしますが、まあ、いいでしょう。