// JavaScript Document
// Editor : sato.r
$('document').ready(function(){
/*--------------------
 * ボタン/リンクアンカー画像のロールオーバー
 * 「元画像名_hover.元画像の拡張子」でhover用の画像を用意して
 * hoverさせたいボタン/リンクアンカーにimg-hoverクラスを当てれば動く
 * example
 * <a href="" class="img-hover"><img src="css/img/item-list/btn_mail_add.gif" alt="メルマガにチェック" title="メルマガにチェック" ></a>
 * <button type="submit" id="btn_login" class="img-hover"><img src="css/img/login/btn_login.gif"></button>
--------------------*/
	$('.img-hover').hover(						 
		function(){//over
			path = $(this).children('img').attr('src').split('.');
			hover = path[0]+"_over."+path[1];
			$("<img>").attr("src",hover);
			$(this).children('img').attr('src',hover);
		},
		function(){//out
			path = $(this).children('img').attr('src').split('_over.');
			hover = path[0]+"."+path[1];
			$("<img>").attr("src",hover);
			$(this).children('img').attr('src',hover);
		}
	);
/*--------------------
 * テーブルセルのロールオーバー
 * セルをロールオーバーさせるテーブルにcols-hoverクラスを追加して下さい
 * ロールオーバーの指定はcssファイルでmouseHoverクラスに対して行って下さい
 * example
 * [html]
 * <table class="cols-hover">
 * …
 * </table>
 *[css]
 * .mouseHover{background-color:blue;}
--------------------*/
	$('table.cols-hover tr').hover(
		function(){
			//over
			$(this).children('td').each(function(){
				$(this).addClass("mouseHover");
			});
		},
		function(){
			//out
			$(this).children('td').each(function(){
				$(this).removeClass("mouseHover");
			});
		}
	);
});