btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

(X)HTML JavaScript・jQuery

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

投稿日:

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

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







-(X)HTML, JavaScript・jQuery
-, ,

執筆者:


  1. 検索中 より:

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

  2. tag より:

    はじめまして。

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

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

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

  3. qwerty より:

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

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

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQuery で奇数番目・偶数番目を指定するときの注意点。

ちょっとはまったのでメモ。 リストやテーブルに対して、jQuery で奇数番目・偶数番目の要素を指定するときの注意点です。 例えば、以下のような HTML があるとします。 <ul id=”li …

no image

jQueryとprototype.jsを同時に使うには

最近、JavaScriptのライブラリを使って動きを付けたりすることが多くなってきました。 特に多用するのが、ライブラリの代表格である「jQuery」と「prototype.js」の2つ。 ただ、どち …

no image

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、 …

no image

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なと …

no image

JSライブラリ「jQuery」と「prototype.js」の特徴。

数あるJavascriptライブラリの中で代表的な「jQuery」と「prototype.js」。 今までは何らかの機能が必要になった際にググったり本で調べたりして、見付けたものをベースに何とか形にし …