ロールオーバー時の画像とは別に、カレント時の画像も設定できるロールオーバーjQueryプラグインを作りました。

あらすじ

ナビゲーション用の画像は3種類用意されるケースがよくあると思います。通常時の画像、ロールオーバー時の画像、もうひとつが、アクティブなページを表す画像です。

よく見かけるjQueryのロールオーバープラグインは、通常時の画像を「image.png」、ロールオーバー時の画像を「image_on.png」などにしておき、マウスオーバー時に画像を差し替えているものが多いです。ただし、これだとアクティブなページに別の画像を使おうとした際に、ちょっとややこしくなります。

このjQurtyロールオーバープラグインは、ナビゲーション部分に共通のHTMLを使っていても、アクティブページ用の画像を表示することが可能です。

ダウンロード

似たようなプラグインを配布してますが、今回は、人のを改造するのではなく、ちゃんと自分で作りました。拡張子を置換する正規表現だけでも2時間もかかってゲロが出そうになりました。プログラマーってほんとすごいよね。

Downloaded DOWNLOAD - jquery.rolloverd5.js

準備

head内でjQueryとこのプラグインを読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rolloverd5.js"></script>

ちなみに、今回使うナビゲーションのHTMLはこんな感じでどうでしょう。

<ul id="globalnav">
    <li id="nav01"><a href="01.html"><img src="image01.png" alt="" /></a></li>
    <li id="nav02"><a href="02.html"><img src="image02.png" alt="" /></a></li>
    <li id="nav03"><a href="03.html"><img src="image03.png" alt="" /></a></li>
</ul>

使い方1 普通のロールオーバー

ロールオーバーさせたい画像をセレクタで指定するだけです。ロールオーバー時の画像は、拡張子の手前に「_on」を付けたものを、同じディレクトリ内に置いといてください。

<script type="text/javascript">
    $(function($) {
        $('#globalnav a img').rollover();
    });
</script>

使い方2 アクティブページを指定

アクティブ用の画像を、通常画像の拡張子の手前に「_cr」を付けたファイル名で用意しておきます。オプションでアクティブページ用の画像に差し替えたい要素を指定すると、指定した要素は、最初から「_cr」が付いた状態で表示されます。

<script type="text/javascript">
    $(function($) {
        $('#globalnav a img').rollover({
            active: "#nav02 a img"
        });
    });
</script>

使い方3 アクティブページ用の画像を用意するのが面倒!

上記2に加え、オプションに、アクティブページの画像に使う接尾語を指定すると、アクティブページに指定した画像に「_cr」ではなく、好きな文字を付けた画像を表示させることができます。これを「_on」にすれば、ロールオーバー時の画像を使い回せます。発想が、せこいっ!

<script type="text/javascript">
    $(function($) {
        $('#globalnav a img').rollover({
            active: "#nav02 a img",
            sufcr: "_on"
        });
    });
</script>

使い方4 ファイル名まちがえちゃった

オプションで、ロールオーバー時の画像に使う接尾語を指定すると、ロールオーバー時の画像に「_on」ではなく、好きな文字を付けた画像を表示させることができます。画像ファイルを保存するときに、間違えて「_in」とか打っちゃった時に使える技で、KOF95の超必殺技くらいの破壊力があるといいます。個人的には、「リネームしろ」と、思います。

<script type="text/javascript">
    $(function($) {
        $('#globalnav a img').rollover({
            sufon: "_in"
        });
    });
</script>

補足など

アクティブな画像は、一回にひとつしか指定できないので、ナビゲーショングループごとに呼び出すといいです。

<script type="text/javascript">
    $(function($) {
        $('#globalnav a img').rollover({
            active: "#nav02 a img",
        });
        $('#subnav a img').rollover({
            active: "#nav05 a img",
        });
    });
</script>

この本、知人に借りたけど、なかなか進まないです・・・