Home > (X)HTML | JavaScript・jQuery > yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

[読了時間の目安:約 4 分]

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」など)でロールオーバーするとか。

そんなトコでしょうか。
もっとスマートな方法がありそうな気もするんですけど。

Comments:3

検索中 12-07-05 (木) 10:55

わたしもハマリました。おかげで助かりました。
ありがとうございました!!

tag 13-07-20 (土) 1:38

はじめまして。

私もハマってしまい、、、
いろいろ検索しているうちに
こちらのブログにたどり着きました!

大変参考になりました!!

本当にほっとしました。。。
ありがとうございました。

qwerty 14-07-18 (金) 1:23

ハマってました。。
検索でたどり着き、ようやく理解出来ました!

大変参考になる記事をありがとうございます!!!

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://blog.btmup.com/xhtml/yuga-js-rollover-self-link.html/trackback
Listed below are links to weblogs that reference
yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。 from btmup Blog

Home > (X)HTML | JavaScript・jQuery > yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

リンク
フィード
メタ情報

このページのトップへ