ボタンで画像を切り替えて表示する

フォームのボタンをクリックしたときにJAVA Scriptを呼び出すことで、様々な処理を実行することができます。ここでは、、ボタンを使って画像を切り替えて表示する方法を考えてみましょう。

■　関数の実行タイミングの設定

２つのボタンを作成し、それぞれにクリックしたときに呼び出す関数を設定します。

最初に表示する画像の定義
<IMG ID=img1 SRC="../../assets/images/flower1.jpg" BORDER="1" WIDTH="200" HEIGHT="265">

ボタンの定義
<INPUT TYPE=button NAME="submit" VALUE="前に戻る" onClick="goback()">
<INPUT TYPE=button NAME="submit" VALUE="次へ進む" onClick="nextpic()">

■　画像を切り替える関数の設定

JAVA Scriptを使って、関数が呼び出されるたびに表示する画像を切り替えるようにする処理を記述します。

<SCRIPT LANGUAGE="JavaScript">
<!--
var i=1;

function nextpic(){
if(i<12){
i++
};
img1.src = "../../assets/images/flower" + i + ".jpg";
}
function goback(){
if(i>1){
i--
};
img1.src = "../../assets/images/flower" + i + ".jpg";
}
//-->
</SCRIPT>

例では、フォームの「ボタン」オブジェクトに関数を設定して画像を切り替えています。「次へ進む」ボタンには「〜数値.jpg」の形式で連番になっているファイルの数値の部分を増加させる関数を、「前に戻る」ボタンにはファイルの数値の部分を減少させる関数をそれぞれに割り当てます。このように設定しておくことで、「次へ進む」ボタンのクリックで「flower1.jpg」が表示されていた場合には「1」が加算されて「flower2.jpg」が、「前に戻る」ボタンのクリックで「flower2.jpg」が表示されていた場合には「flower1.jpg」が表示されるようになります。

■　画像の最後で「次に進む」ボタンを無効にする

例のでは、「nextpic()」関数に「if(i<画像の枚数)」という条件を設定して、最後の画像が表示されたら「次へ進む」ボタンの処理を無効にしています。これは、次に表示するファイルが存在しない時に「次へ進む」ボタンの処理を実行すると、画像の表示欄に赤い×しるしが表示されてしまうためです。同様に「前に戻る」ボタンにも先頭の画像が表示されている場合には処理を無効にしています。

<<<戻る