ちょっと、jQueryでロールオーバーが必要になってきたので、調べたらプラグインではなくスクリプトとして記述の仕方が紹介されていたので、メモ。

<pre>jQuery(document).ready(function($) {
	var postfix = '_on';<!--more-->
	$('#gNavi a img').not('[src*="'+ postfix +'."]').each(function() {
		var img = $(this);
		var src = img.attr('src');
		var src_on = src.substr(0, src.lastIndexOf('.'))
		           + postfix
		           + src.substring(src.lastIndexOf('.'));
		$('<img>').attr('src', src_on);
		img.hover(
			function() {
				img.attr('src', src_on);
			},
			function() {
				img.attr('src', src);
			}
		);
	});
});

たったこれだけのソースでロールオーバーが再現できるなら良いかなと思った。何気に便利だと思う。最大のポイントは、img要素にclassタグで指定しなくてもいいということ。これなら、余計なclassをつけなくてもいい。

んで、この作者さんは、プラグインも作っているようなので、こちらもリンク。

関連記事