yuga.js という非常に便利な JavaScript があります。
多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例をご紹介。
ロールオーバーとハイライトの関係
まずは使い方のおさらい。
yuga.js でロールオーバーする際は、元になる画像と、そのファイル名に「_on」を付加した画像を用意します（例えば「btn.jpg」と「btn_on.jpg」）。
で、後は HTML で <img> タグに「class="btn"」を設定してやるだけ。
とても簡単にロールオーバーが実現できます。
（親要素に「class="allbtn"」を設定すれば、その子要素すべてに「class="btn"」を設定したのと同じ効果が得られたりもします）
ただ、ここで気を付けないといけないのは、「自ページへのリンクを設定している画像にロールオーバーは効かない」ということです。
ここで僕もハマってしまいました。
色々調べてみて分かったその要因は、yuga.js が持つ「現在のページをハイライト表示」という別の機能。
これは、現在のページ（自ページ）へのリンクを設定している場合、その内容を別の画像に置き換えてくれるというもの。
もちろんこれはこれで非常に便利な機能で、特に CMS のグローバルメニューなんかでは活躍しそうですよね。
ところが、「別の画像に置き換える」ということは、「ファイル名を変更する」ということです（デフォルトでは「_cr」が付加されます）。
つまり、ロールオーバーの元になる画像のファイル名が変わってしまうワケですね（ここでは「btn.jp」→「btn_cr.jpg」）。
その上でロールオーバー用の画像（「btn_cr_on.jpg」）を探すことになるので、プログラム的には「無いよ」ということになってしまう、と。
どうやらこういうことのようです。
機能を無効にして解決する
じゃあどうすれば良いかというと、一番単純なのは「現在のページをハイライト表示」の機能を無効にすることです。
「yuga.js」をエディタで開くと、ライセンスや使用方法の記述のすぐ後に、各機能（関数）を呼び出す箇所があります。
不要な機能がある場合、そこで各関数のアタマに「//（スラッシュ2本）」を付加してやると、その行がコメント化され、無効になります。
で、「現在のページをハイライト表示」は「$.yuga.selflink();」なので、これに「//」を付加します。
$(function() {
//$.yuga.selflink();
$.yuga.rollover();
$.yuga.externalLink();
$.yuga.thickbox();
$.yuga.scroll();
$.yuga.tab();
$.yuga.stripe();
$.yuga.css3class();
});
これで、自ページへのリンクを設定してもファイル名は変わらなくなるので、ロールオーバーも問題なく動作します。
機能を生かしたままの解決法
「現在のページをハイライト表示」を使いながらとなると……、どうしたら良いんですかね？
ハイライト表示されたときのロールーバー用画像（例えば「btn_cr_on.jpg」）を別途用意するとか、自ページへのリンクの仕方を工夫するとか（ファイル名じゃなくディレクトリ名までで切ったり）、いっそ別のスクリプト（「smartRollover.js」など）でロールオーバーするとか。
そんなトコでしょうか。
もっとスマートな方法がありそうな気もするんですけど。