クリックで画像を切り替えて表示する

クリックされた時に、画像を切り替えるための関数「picchange()」を呼び出すように設定します。

最初に表示する画像の定義
<IMG ID=img1 SRC="../../assets/images/view01.jpg" onClick="picchange()" BORDER="1" WIDTH="500" HEIGHT="400">

■　画像を切り替えて表示する関数の設定

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

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

function picchange(){

switch(imgselect){
case 0:
img1.src = "../../assets/images/view01.jpg";
imgselect++;
break
case 1:
img1.src = "../../assets/images/view02.jpg";
imgselect++;
break
case 2:
img1.src = "../../assets/images/view03.jpg";
imgselect++;
break
case 3:
img1.src = "../../assets/images/view04.jpg";
imgselect++;
break
case 4:
img1.src = "../../assets/images/view05.jpg";
imgselect++;
break
case 5:
img1.src = "../../assets/images/view06.jpg";
imgselect++;
break
case 5:
img1.src = "../../assets/images/view06.jpg";
imgselect++;
break
case 6:
img1.src = "../../assets/images/view07.jpg";
imgselect++;
break
case 7:
img1.src = "../../assets/images/view08.jpg";
imgselect++;
break
case 8:
img1.src = "../../assets/images/view09.jpg";
imgselect++;
break
case 9:
img1.src = "../../assets/images/view10.jpg";
imgselect++;
break
case 10:
img1.src = "../../assets/images/view11.jpg";
imgselect++;
break
case 11:
img1.src = "../../assets/images/view12.jpg";
imgselect++;
break
case 12:
img1.src = "../../assets/images/view13.jpg";
imgselect++;
break
case 13:
img1.src = "../../assets/images/view14.jpg";
imgselect=0;
break
}
}
//-->
</SCRIPT>

例では、「onClick」イベントをつかって、画像クリック時に画像を切り替えて表示しています。
このスクリプトでは、画像をクリックした回数を変数「imagselect」を使ってカウントし、「switch」関数を使って表示する画像を切り替えています。
画像を切り替えるには、「オブジェクト名.src="ファイル名"」の形式で切り替える画像のファイル名を指定します。

■　レイアウトを崩さないための画像サイズ指定

例のように画像を切りあけて表示する場合には、<IMG>タグに「WIDTH（幅）」「HEIGHT（高さ）」属性を指定して画像のサイズを指定しておくのがポイントです。常に同じサイズで画像を表示させることで、画像を切り替えた時にホームページのレイアウトが崩れてしまうのを防いでいます。

クリックで画像を切り替えて表示する

　クリックで画像を切り替えて表示する