JavaScript メニューのロールオーバー画像を現在表示中のページで保持する

(2014/03/30 追記)
その後、JavaScriptを少々書き直しました。
以下の記事に載せてますので、そちらをご覧ください。
メニュー画像のロールオーバー (imgタグ、css background-image 両対応)をする jQuery JavaScript
(追記・改変 終わり)

rollover.js でメニューのロールオーバー設定をしているソースがコーダーさんから回ってきたのですが、表示中ページのメニュー用画像がHTML直書きでロールオーバー後の画像を使用したものでした。

このままだと、CMS（今回はMovableType）にモジュールとして登録しづらいので、rollover.jsを間に合わせでちょっとだけ改変してみました。

あとで使うかもしれないので、忘れないようにBlogに公開しておきます。他に良い手があったら教えて下さい。

HTML

head

<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.rollover.js"></script>

jqueryは古いバージョンでも動くはずです。

body

<ul>
  <li><a href="//example.com/index.html"><img src="/img/top.gif" class="rollover" /></a></li>
  <li><a href="//example.com/info/"><img src="/img/info.gif" class="rollover" /></a></li>
  <li><a href="//example.com/news/"><img src="/img/news.gif" class="rollover" /></a></li>
</ul>

a タグのリンク先はドメイン名から記述します。
単純に match で、リンク先のURLが現在のURLに「含まれているか」を検証しているだけなので、たとえばトップページへのリンク先を「/」だけで指定したりすると、表示する全てのページが該当してしまうためです。

JavaScript

var preLoadImg = new Object();

function initRollOvers(){
	$("img.rollover").each(function(){
		var url = $(this).parent('a').attr('href');
		var imgSrc = this.src;
		var sep = imgSrc.lastIndexOf('.');
		var onSrc = imgSrc.substr(0, sep) + '_on' + imgSrc.substr(sep, 4);
		preLoadImg[imgSrc] = new Image();
		preLoadImg[imgSrc].src = onSrc;

		if(location.href.match(url)) {
			$(this).attr('src', onSrc);
		}else {
			$(this).hover(
				function() { this.src = onSrc; },
				function() { this.src = imgSrc; }
			);
		}
	});
}
$(function(){
	initRollOvers();
});

使い方

メニューの画像保存ディレクトリと同じディレクトリに、_on をつけたロールオーバー用の画像を保存。

たとえば、 news.jpg なら、 news_on.jpg というロールオーバー用の画像を同じ場所に保存します。

img タグに class="rollover" を設定。

img タグを囲んでいる a タグのURLが表示中のURLに含まれる場合、ロールオーバー用の画像が表示されます。

未対応部分

単純に match で比較してるので、ディレクトリ止めの URL 指定の場合、そのディレクトリ配下全てのページでロールオーバー用の画像が表示されます。

とくに、公開ディレクトリ直下へのリンクをファイル名なしで指定した場合、そのサイトの全てのページで、当該部分がロールオーバー用の画像になります。

たとえば、a タグのリンク先を www.example.com/ とした場合、表示中のURLが www.example.com/index.html でも、www.example.com/info/index.html でもロールオーバー用の画像が表示されてしまいます。（どちらにも、www.example.com/ が含まれているためです。）

(追記・改変 2014/03/24)
もっともMovableTypeの場合なら、トップページ用テンプレートは別に用意するので、そこではメニュー用のモジュールをIncludeせずにテンプレにHTML直書きにして、top_on.gif を設定してしまえば問題ないですね。

汎用化するのなら、正規表現を使うなりしてうまいことやるんでしょうが、とりあえず間に合わせなので今回はここまで。
(追記・改変 終わり)

最近は img タグでナビゲーションメニューを組むこと自体が少なく必要性が薄いので、たぶんこのまま放置すると思いますが、もし修正する必要に迫られたら、その時にはもう少し頑張って書き直します。