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

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

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

no image

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

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

no image

HTML で同一階層のパスを指定する方法。

えぇっと、色んなサイトを見ていて「あれ? 意外とみんな知らない?」と思ったことがあるので、サラッと書いておきます。 「んなことくらい知っとるわ!」という方は優しくスルーしてください。 一つ前の階層とル …

no image

col/colgroup 要素で有効なスタイルと無効なスタイル。

「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にも …

no image

アクセシブルなスライダーをJavascriptで実現 – 「Accessible News Slider」

ここで言う「スライダー」とは、「同じ構造の要素を限られたスペースで表示するために、要素ごとスライドさせて表示させるためのもの」という意味。 (↓こんなのです) 音量を調整するような「つまみ」のことでは …