HTMLのみでページ内リンクを作成する場合、通常、以下のようにコーディングしますね。

<a name="top" id="top"></a>

<a href="#top">ページTOPへ</a>

「ページTOPへ」をクリックすると、nameとidに「top」を設定している箇所にスクロールします。nameとidの2つを設定しているのはクロスブラウザ対策です。

この時、スクロールといっても、ブラウザの縦スクロールバーが表示されている場合に、そこに瞬時にジャンプするだけです。

特にページが縦に長い場合に、瞬時に移動してしまうと、画面が急に差し変わるので、他のページに遷移したと錯覚を起こす場合もあるようです。また、ただ単純に見栄えが良いということで、最近ではJavaScriptを利用してスムーズなスクロールを実装するサイトを多く見かけます。

画像ロールオーバーを実装するためにjavascriptを用いる例は多数存在しますし、私もよく利用します。今回、jQueryにも慣れてきたので、簡易版ではありますがjQueryでその機能を実装してみました。

jQueryのバージョンは1.3.2です。

function ROverImg(classname){
	var prefix = '_o';
	$("img").each(function(){
		var src = $(this).attr("src");
		if($(this).hasClass(classname) && src.indexOf(prefix + ".") == -1){
			var size = src.length;
			var over = src.substring(0, size - 4) + prefix + src.substring(size - 4, size);
			$(this).attr("out", src);
			$(this).hover(
				function(){
					$(this).attr("src", over);
				},
				function(){
					$(this).attr("src", $(this).attr("out"));
				}
			);
		}
	});
}

簡単に説明すると、imgタグ全てに対してクラス名「classname」を指定した要素を探し出し、ロールオーバー画像をセットするという処理です。