改造人ツクルダー & ザ・テクトロイド・ボックスTUKURUDER & The Techtroid Box

もし、ロールオーバーするすべての画像に対して効果を共通にするなら（この場合は50%透過PNGを重ねる）、src属性の値（URL）も共通になるので、いちいちHTML内に記述することもない。HTMLコードをすっきりさせるため、jQueryのattr()を使い、src属性のURLを表示させるようにした。

[codesyntax lang=”html4strict” tab_width=”2″ title=”HTML”]

<a href="#">
  <img class="rollover" style="background-image: url(http://hogehoge.com/images/logo.gif); width: 292px; height: 67px;" />
</a>

[/codesyntax]

[codesyntax lang=”javascript” title=”jQuery”]

jQuery(document).ready(function($) {
	var postfix = '_on';
	$('.rollover').not('[src*="'+ postfix +'."]').each(function() {
		$(this).attr({src: "http://hogehoge.com/images/img_rollover.png"});
		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);
			}
		);
	});
});

[/codesyntax]