【jQueryのプラグインを作ろう！】

第13回「手軽に画像を切り替えよう」
＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。

text : 古籏一浩

■画像切り替え（イメージスワップ／ロールオーバー）

　Ajaxが普及する前、JavaScriptでもっとも多かった需要（用途）が画像切り替え（イメージスワップ／ロールオーバー）でした。ブラウザの動作の違いやブラウザバージョンの頻繁な更新、シェアの変化の激しさから安定して動作させることが難しかったという事情がありました。Ajax普及以降にJavaScriptを始めた人には、かなり分かりにくい＆信じられない事も多くあったのです。
　でも、今では事情も変わり高機能なライブラリが充実したので、以前よりももっと便利な画像切り替え（イメージスワップ／ロールオーバー）があってもよさそうです。そこで今回は呼び出す度に自動的に複数の画像が切り替わるプラグインを作成してみます。

■alt属性に入れ替える画像のパスを指定するだけ

　今回はalt属性に入れ替えたい画像のパスを,（カンマ）で区切って列記するだけで自動的に画像を入れ替えるという仕様にします。alt属性でなくtitle属性でも他の属性でも構いません。alt属性の本来の用途とは、ずれてしまいますが、そこらへんはご容赦のほどを。
　alt属性に画像のパスがカンマ区切りで書いてあるのでsplit(",")として分割すれば、入れ替える画像のパスが配列に格納されます。あとは、現在の画像のパスと比較して一致したら次の画像に切り替える、つまりsrc属性に次の画像のパスを指定するだけです。呼び出す度に切り替わりますが、最後の画像まで表示したら最初の画像に戻すには画像の枚数との剰余をもとめればできあがりです。
　完成したプラグインのソースは以下のようになります。

【プラグインのソース】

/* 画像切り替えプラグイン for jQuery
2009.2 By KaZuhiro FuRuhata  */
$.fn.irot = function(){
return this.each(function(){
var aURL = $(this).attr("alt").split(",");
var iSrc = $(this).attr("src");
for(var i=0; i<aURL.length; i++){
if (iSrc.indexOf(aURL[i]) > -1) break;
}
i = (i + 1) % aURL.length;
$(this).attr("src", aURL[i]);
});
}

■実際に使ってみよう

　それでは作成したプラグインを使ってみましょう。
　最初にjQueryライブラリファイルを読み込ませたあとにプラグインファイルを読み込ませます。

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/irot.js"></script>

　次に入れ替える画像のimgタグを$()のセレクタで指定します。

$("#sampleDoc").irot();

　これで次の画像に切り替わります。アニメーションさせる場合にはsetInterval()やsetTimeout()を使って処理します（サンプルを実行する）。
　切り替える画像はJPEGでもGIFでもPNGでも構いません。このプラグインは単純に画像を切り替えるだけなので、ロールオーバーなどにも仕様できます。サンプルのように異なる速度で自由にアニメーションさせることもできますし、使い方が手軽なのでいろいろな用途に使えるのではないかと思います。