jQueryを利用した画像切り替え
インストール画面の説明などで、画像をクリックしたら次の画像を表示したいというようなケースがあるかと思います。jQueryを利用して簡単に実装できるJavaScriptを書いてみたので、必要な方はお使いください。
導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
画像を切り替えるScriptは以下の通りです。最初にすべてを非表示にして、最初の画像を表示しています。クリックイベントに次の画像を表示するScriptを割り当てているわけですね。
<script type="text/javascript">
$(function(){
function wizardImages(id) {
var targetId;
var maxImages;
targetId=id+' img';
maxImages=$(targetId).length;
$(targetId).css('display','none');
$(targetId+':first').css('display','inline');
$(targetId).click(function() {
$(this).css('display','none');
$(targetId).eq(($(this).index()+1)%maxImages).css('display','inline');
});
}
wizardImages('#setup');
});なお、Scriptのサンプルではid="setup"を処理対象にしています。必要に応じて変更してください。ちなみにHTML側は以下のように記述します。IMG要素は必要な数だけDIV要素内に入れましょう。
<div id="setup"> <img src="*****" alt="*" width="*" height="*"> </div>
実際の使用例は「ffdshowのセットアップ」をご覧ください。
ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Operaを用いて表示を確認しました。