ボタンをクリックして画像を入れ替える
さて、今回のテーマは「ボタンをクリックして画像を入れ替える」という事です。
それでは、早速下にあるサンプルを見てください。
もちろん、見るだけではいけません。ちゃんと「NEXT」と「BACK」のボタンをクリックして、確認してください。

サンプル
豊平町　雪の写真

どうです？美しい景色ですね。
宜しければ、ご案内いたしますが？

さて、半分冗談はこれぐらいにして、ちゃんと画像が変わったでしょうか？
では、問答無用でソースを見ていただきましょう。

ソース 
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
<!--
var picNum=1;
var imgvalue=3;	//画像数
var imgPath=Array(imgvalue);

for (var i=0; i<imgvalue ; i++) {
imgPath[i]=new Image();
}
/*画像を増やす場合は、変数「imgvalue」の値を変更して、「imgPath」に画像のパスを足していく*/
imgPath[0].src = "images/sample03.jpg";
imgPath[1].src = "images/sample04.jpg";
imgPath[2].src = "images/sample05.jpg";

function changePic(picCount) {
  picNum+=parseFloat(picCount);
  if(picNum==0) {
    picNum+=1;
  } else if(picNum>imgvalue) {
    picNum-=1;
  } else {
    document.MainPic.src=imgPath[(picNum-1)].src;
  }
}

-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
  <TR>
    <TD COLSPAN="2">
      <IMG SRC="images/sample03.jpg" ALT="豊平町　雪の写真" NAME="MainPic">
    </TD>
  </TR>
  <TR>
    <TD>
      <INPUT TYPE="button" VALUE="BACK" onClick="changePic('-1')">
    </TD>
    <TD>
      <INPUT TYPE="button" VALUE="NEXT" onClick="changePic('1')">
    </TD>
  </TR>
</TABLE>
</BODY>
</HTML>


ポイントは、<IMG>タグに名前を付けて、ボタンをクリックするごとにSRC属性によって画像を入れ替えているところです。
onClickイベントで引数に「BACK」なら1を引く、「NEXT」なら1を足すようにしてます。
今回はとにかくコピペで手軽に誰でもサルでも使えるように作ったつもりです。
サルは無理でしたが、ホームページを持っておられる方でしたら簡単に使えると思います。

<Script Language=・・・>から</Script>までを<HEAD>タグの中に気合を入れて、コピー＆ペーストします。（もちろん気合は無くても出来ます。）
続いて変えていきたい画像の<IMG>の名前をMainPicとします。
下ごしらえは、これだけです。
実際の調理のレシピは当然JavaScript内で行います。
imgvalueという変数を探し出し、そこに今回必要とする食材（画像）の枚数を入れます。（サンプルでは、3枚の画像を使用してますね。）
次に太字になっている部分、imgPath[value]に画像のパスを入れます。
もちろん、画像数が6枚など増えてきたら、imgPath[3]="・・・"、imgPath[4]="・・・"、imgPath[5]="・・・"と増やしていきます、当たり前ですけど。

さて、調理が済んだらもう後は堪能するだけです。
が、その前に文明人としてはナイフとフォークが要ります。
今回使用したのは、<INPUT TYPE="button">です。
もちろん、画像を使用しても構いませんし、文字でも構いません。
とにかくonClickイベントが使えれば大丈夫です。
それで、画像を戻したい場合はchangePic('-1')として、画像を進めたい場合は、changePic('1')とします。

以上で、分かりにくい説明を終わります。

最後に今回は、ちょっとふざけすぎた説明になってしまった事をお詫びします。


▲BACK


IT SOHO CLUB