クリックで画像が指定したものに変わる
画像クリックで、違う画像が表示される仕組みをJavaScriptで作っていた。最初は1枚の画像に対して、クリックで別画像が表示され、再クリックでもとの画像が表示されるという単純なものだった。しかしいろいろ考えていると
「画像が3枚とか4枚のローテーションになったらどうしよう」とか「スクリプトにファイル名を書き込んだら、画像変更の際はやっぱりプログラムを書き換える？」とか思ってしまい、結局関数にした。JavaScriptで汎用的に使えそうな関数を書くなんてめったにないのでメモっておく。
var overimg=0;
function clickChange(){
property=clickChange.arguments;
imgArray=new Array();
for(i=0;i<property.length;i++){
if(i==0){
target=property[i];
}else{
imgArray[i-1]=property[i];
}
}
overimg++;
if(overimg>imgArray.length-1){
overimg=0;
}
document.getElementById(target).src=imgArray[overimg];
}
使い方はこんな感じ。
<a href="javascript:clickChange(‘img1′,’a.jpg’,’b.jpg’,’c.jpg’);"><img src="a.jpg" id="img1" /></a>
第1引数：変化させたい画像のID値
第2引数：元の画像のURL
第3引数：1回目のクリックで表示させる画像のURL
第4引数：2回目のクリックで表示させる画像のURL
・
・
・
という感じで、ローテーションさせたい画像の数だけ引数に指定してやる。ローテーションが最後までいくと、再度もとの画像が表示され、そこから再び同じ手順で・・・。
JavaScriptは苦手なので、できたときはちょっとうれしい気分♪。
