ないのでつくってみた「jquery SwapImage Menu」


仕事でスワップイメージのメニューを組むのにjqueryでなんかないかな〜?と調べていたら、なにもありませんでしたw
ロールオーバー系は皆さん良く作ってるんですけどね、なんでかスワップイメージ系のスクリプトって作ってる人いないんですねぇ。
今更Dreamweaverスワップイメージのjavascript使うのも嫌だったので、とりあえず、良い機会なのでjqueryの勉強も兼ねて作ってみました。
要点は以下の通り。

  • メニューボタンにオンマウスするとタイトル画像が切り替わる
  • メニューボタンクリックでページ遷移
  • 折角だから、タイトル画像にもメニューボタンと同じ遷移先をリンクする
  • 単純に切り替わるだけだとつまらないので、画像をフェードアウト・フェードインする


できたのは以下です。
デモはこちら

javascriptソース

$(function(){
	$("#buttons a").hover(function(){
		var picture = "images/" + $(this).attr("class") + ".jpg";
		$("#swapimage .floatPicture:visible").fadeOut("fast",function(){
			$("#swapimage .floatPicture:hidden").fadeIn("fast").attr("src",picture);
		});
		$("#swapimage a").attr({
			href:$(this).attr("href"),
			title:$(this).attr("title")
		});
		$("#swapimage .basePicture:visible").fadeIn("fast").attr("src",picture);
	});
});

cssソース

body{
	margin:0;
	padding:0;
	text-align:center;
}
a,img{border:0;}
#container{
	width:600px;
	margin:30px auto;
}
.spacer{
	clear:both;
	margin-top:30px;
}
#swapimage{position:relative;}
#swapimage,
#swapimage a,
#swapimage img{
	width:400px;
	height:300px;
	margin:auto;
}
#swapimage .floatPicture{
	position:absolute;
	left:0;
	z-index:1;
	overflow:visible;
}
#swapimage .basePicture{
	position:absolute;
	left:0;
	z-index:0;
	overflow:hidden;
}
#buttons{
	width:400px;
	margin:10px auto;
}
#buttons a{
	width:100px;
	height:34px;
	margin:10px 15px;
	padding:8px 0 0;
	display:block;
	float:left;
	background:url("images/button.png") no-repeat;
	font-size:0.75em;
	text-decoration:none;
}

htmlソース

<div id="swapimage">
	<a href="images/btn1.jpg" title="テストボタン1">
		<img src="images/btn1.jpg" class="floatPicture">
		<img src="images/btn1.jpg" class="basePicture">
	</a>
</div>

<div id="buttons">
	<a href="images/btn1.jpg" class="btn1" title="テストボタン1">テストボタン1</a>
	<a href="images/btn2.jpg" class="btn2" title="テストボタン2">テストボタン2</a>
	<a href="images/btn3.jpg" class="btn3" title="テストボタン3">テストボタン3</a>
	<a href="images/btn4.jpg" class="btn4" title="テストボタン4">テストボタン4</a>
	<a href="images/btn5.jpg" class="btn5" title="テストボタン5">テストボタン5</a>
	<a href="images/btn6.jpg" class="btn6" title="テストボタン6">テストボタン6</a>
</div>


エラーってほどではないんですが、現時点で確認してる問題点は、フェードアニメーションの途中に他のボタンにマウスオーバーするとアニメーションが狂うってことです。
とりあえずの対処で、.fadeOut()と.fadeIn()をfastにしてます。
slowやnormalにするとクロスフェードの効果がハッキリとわかるんですがね、せっかちな人がボタンの上をぐるぐるやっちゃうと微妙なことになってしまうので。

あー、バージョン表記はテキトーです
とりあえず、0.1ごとに動作確認して一息ついたというカウントですw