JavaScriptがサクサク使えるようにならないので、何かいいものはないかと探したところ、jQueryが目に留まった。Prototypeよりもコードが小さく、記述も独特な書き方でコンパクトに表現できる。何か、メジャーなライブラリになる予感。今のうちに、使えるようになろう、っと(^o^)/。

って、直ぐには使えるようにならない(T_T)。カテゴリに「プログラミング」を設けているので、理解が進んだ（少しだけど）ものを記事にしておこう。お題は、タイトルの通り。CSSを利用する方法もあるが、メニューなど個別に指定するのは大変である。そこでこれですよ。

「class=”roll”」が指定された<img>要素の画像にマウスカーソルが移動したら、画像を切り替えるプログラムである。画 像ファイルを切り替えなければならないので、ロールオーバーするファイル名は「menu_ov.gif」のように、元のファイル名に「_ov」を加えた名 前とする。以下サンプルです。

画像がきれいだったので、Vegaさんからお借りした。プログラムは次の通り。

<script type="text/javascript">
$(document).ready(function() {
	$("img.roll").hover(function() {
		$(this).attr("src", function() {
			return this.src.substring(0, this.src.lastIndexOf(".")) + "_ov" + this.src.substring(this.src.lastIndexOf("."));
		});
	}, function() {
		$(this).attr("src", function() {
			return this.src.substring(0, this.src.search(/_ov\./)) + this.src.substring(this.src.lastIndexOf("."));
		});
	});
});
</script>