/******************************
jQueryを使ったマウスオーバーによる画像切り替え。
・jQuery必須
・透過PNG対応（IE6ではDD_belatedPNG必須）


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

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


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

<!--[if IE 6]>
<script language="JavaScript" type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
	DD_belatedPNG.fix('.ddpng');	// 無くても構わない
</script>
<![endif]-->

<script language="JavaScript" type="text/javascript" src="lib/jq_rollover-1.1.js"></script>

----------------
■実装
----------------
classに「swap」、透過PNGなら「pngswap」も付ける。

<!-- GIF/JPEG/不透明PNG の場合 -->
<a href="～"><img src="～.png" class="swap" /></a>

<!-- 透過PNG の場合 -->
<a href="～"><img src="～.png" class="swap pngswap" /></a>


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


$(function() {

	var jq_rollOver_cache = new Object();	// 画像キャッシュ用

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

			jq_rollOver_cache[this.src] = new Image();
			jq_rollOver_cache[this.src].src = imgsrc_over;

			$(this).hover(
				function(){ this.src = imgsrc_over; },
				function(){ this.src = imgsrc; }
			)
		}
	);

	// IE 6.0 以下
	if (typeof document.documentElement.style.maxHeight == "undefined") {
		
		var oldFixPng = DD_belatedPNG.fixPng;
		DD_belatedPNG.fixPng = function (el) {
			oldFixPng(el);
			if (el.vml ) {
				el.vml.image.shape.attachEvent('onmouseenter', function() {
					var image = el.vml.image.fill;
					var imgsrc = image.getAttribute("src");
					var dotpos = imgsrc.lastIndexOf('.');
					var imgsrc_over = imgsrc.substr(0,dotpos) + '-over.' + imgsrc.substr(dotpos+1);
					image.setAttribute("src", imgsrc_over );
				});
				el.vml.image.shape.attachEvent('onmouseleave', function() {
					var image = el.vml.image.fill;
					image.setAttribute("src", image.getAttribute("src").replace("-over.", "."));
				});
			}
		};
		DD_belatedPNG.fix('.pngswap');
	}	

	
});