/*** imgover ***/
/*
■例
<div class="imgover">
	<a><img src="foo.gif"></a>　←反応する
	<a><img src="bar.gif"></a>　←反応する
	<a><img src="foobar.gif" class="imgactive"></a>　←反応しない
	<img src="foo2.gif">　←反応しない
</div>

■解説
class="imgover"内にあるリンク画像(<a>タグに囲まれている<img>)の
マウスオーバー時に画像が「画像名_o.拡張子」に切り替わる。（foo.gif→foo_o.gif）
もちろんマウスアウトで元の画像に戻る。
リンクでは無い画像や、class="imgactive"を付与された画像ではマウスオーバー時の切替しない。

■NEW!
複数クラス指定にも対応
*/
$(function(){
	$("img:not(.imgactive)",".imgover a").each(function(){
		var $src = $(this).attr("src");
		var $ftype = $src.substring($src.lastIndexOf('.'), $src.length);
		var $hsrc = $src.replace($ftype, "_o"+$ftype);
		$(this).attr("hsrc", $hsrc);
		
		this.preLoad = new Image;
		this.preLoad.src = $hsrc;
		
		$(this).hover(function(){
			$(this).attr("src", $(this).attr("hsrc"));
		},function(){
			$(this).attr("src", $(this).attr("src").replace("_o"+$ftype, $ftype));
		});
	});
});



/*** 画像切替 ***/
/*
■例
ターゲットが別オブジェクトの場合
<a class="chimg" chimg="hogehoge">text</a>
<img src="foo.gif" id="hogehoge">

ターゲットがオブジェクト自身の場合
<img src="hogehoge.gif" class="chimg" />
<input type="image" src="hogehoge.gif" class="chimg" />

<a href="" chimg="hogehoge"><img src="hogehoge.gif" id="hogehoge" /></a>

■解説
class="chimg"のリンクにマウスオーバーでchimg=""に指定したIDの画像が
chimg=""が指定されてなかったら自分自身の画像が
「画像名_o.拡張子」に切り替わる。（foo.gif→foo_o.gif）
もちろんマウスアウトで元の画像に戻るよ。
*/
$(function(){
	$(".chimg").each(function(){
		var $chimg = $(this).attr("chimg");
		var $target = ($chimg == null) ? $(this) : $("#"+$chimg) ;
		
		var $postfix = $(this).attr("postfix");
		var $postfix = ($postfix == null) ? "o" : $postfix ;
		
		var $src = $target.attr("src");
		var $ftype = $src.substring($src.lastIndexOf('.'), $src.length);
		var $hsrc = $src.replace($ftype, "_"+$postfix+$ftype);
		$target.attr("hsrc", $hsrc);
		
		this.preLoad = new Image;
		this.preLoad.src = $hsrc;
		
		
		$(this).hover(function(){
			$target.attr("src", $target.attr("hsrc"));
		},function(){
			$target.attr("src", $target.attr("src").replace("_"+$postfix+$ftype, $ftype));
		});
	});
});



/*** tableColor ***/
/*
■例
<table class="coloredRow">
	<tr>　←ここがclass="rowTint"に。
		<th></th><td></td>
	</tr>
	<tr>
		<th></th><td></td>
	</tr>
	<tr>　←ここがclass="rowTint"に。
		<th></th><td></td>
	</tr>
</table>

■解説
<table class="coloredRow">～</table>内のtrタグに交互に
class="rowTint"を付与する。
cssで.rowTintに色をつければ交互色に。

■TODO
ul,ol,dlあたりでもできるように。
	→liできたよー。
*/

$(function(){
//	$(".coloredRow").each(function(){
//		$(this).find("tr").each(function(i){
//			if(i%2){
//				$(this).addClass("rowTint");
//			}
//		});
//	});
	$("tr:odd,li:odd",".coloredRow").addClass("rowTint");

});