驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」

画像の切り替えでユーザーに驚かせることができそうです。
jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。

sponsors

使用方法

Jquery.ImageSwitchからGroject.ImageSwitch.jsを、jQueryからjquery.jsをダウロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="Groject.ImageSwitch.js"></script>
<script>
$(document).ready(function(){
	$("#id名").click(function(){ //切り替えるときのボタンid
		$(".Slash").ImageSwitch({Type:$(this).attr("class"), 
			NewImage:$(this).attr("rel"),	
			Direction:"DownTop" //動き通常は左右
			});
	});
});
</script>
あとは元画像と切り替えボタンを以下のように書き込みます。

<img src="/test/img/slash1.jpg" alt="Slash" class="Slash"/>
<p id="demo" rel="切り替え画像パス">テキスト</p>
なお動きはサンプルのようなものがあります。

サンプル

Slash

sponsors

Javascriptサンプルページ一覧
skuare.net