餅に切り込み振興会

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

仕事でスワップイメージのメニューを組むのにjqueryでなんかないかな〜？と調べていたら、なにもありませんでしたｗ

ロールオーバー系は皆さん良く作ってるんですけどね、なんでかスワップイメージ系のスクリプトって作ってる人いないんですねぇ。
今更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="テストボタン１">
		<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="テストボタン１">テストボタン１</a>
	<a href="images/btn2.jpg" class="btn2" title="テストボタン２">テストボタン２</a>
	<a href="images/btn3.jpg" class="btn3" title="テストボタン３">テストボタン３</a>
	<a href="images/btn4.jpg" class="btn4" title="テストボタン４">テストボタン４</a>
	<a href="images/btn5.jpg" class="btn5" title="テストボタン５">テストボタン５</a>
	<a href="images/btn6.jpg" class="btn6" title="テストボタン６">テストボタン６</a>
</div>

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

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

書き忘れてたので追記

参考サイト：

• 第11回 attrによる属性値の制御　jQueryによるJavaScript入門
• jQuery 開発者向けメモ - 基本・サンプル
• jQuery 開発者向けメモ - リファレンス
• Fade Method 2 - Single Image Technique

Permalink | コメント(0) | トラックバック(0)