/******************************
jQueryを使ったマウスオーバーによる画像切り替え。
フェード演出で切り替わる。

・jQuery必須
・IE6で透過PNGを表示するとおかしくなる（DD_belatedPNG使ってないので）

参考URL
http://miraigyo.com/blog/archives/226.html


----------------
■準備
----------------
ロールオーバーで表示する画像の名前の最後に「-over」を付ける。

例：
hoge.gif		←通常
hoge-over.gif	←ロールオーバー


----------------
■ヘッダ。読み込み順を変更してはいけない
----------------
<script language="JavaScript" type="text/javascript" src="lib/jquery-1.4.min.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/jq_rollover_fade-1.0.js"></script>

----------------
■実装
----------------
classに「fadeswap」を付ける。
<a href="～"><img src="～.png" class="fadeswap" /></a>


******************************/


$(function() {

	$("img.fadeswap").each(
		function(i){
			var imgsrc = this.src;
			var dotpos = imgsrc.lastIndexOf('.');
			var imgsrc_over = imgsrc.substr(0,dotpos) + '-over.' + imgsrc.substr(dotpos+1);

			this.rollOverImg = new Image();  
			this.rollOverImg.src = imgsrc_over;  
			$(this.rollOverImg).css({position: 'absolute', opacity: 0});  
			$(this).before(this.rollOverImg);
			
			$(this.rollOverImg).hover(
				function(){ 
					$(this).animate({opacity: 1}, {duration: 300, queue: false});  
				},
				function(){ 
					$(this).animate({opacity: 0}, {duration: 300, queue: false});  
				}
			)
		}
	);

});