Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 名前が連番でない画像を切り替えて表示する

IE5.0以降のみ(Macintosh版IE5.0では正しく表示されない場合があります)

一定の時間ごとに画像が切り替わる処理に配列変数を使うと、ファイル名が連番でなくても処理させることができます。ここでは、画像をスライドショーのように自動的に切り替えて表示する方法を考えてみましょう。

■ 最初に表示する画像の定義

最初に表示する画像にIDを設定します。

<IMG SRC="kaibosshi.jpg" ID=img1 WIDTH="357" HEIGHT="245">

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

ページの読み込みが完了した時に、画像を切り替えるための関数「slideshow()」を呼び出すように設定します。

<BODY onLoad="slideshow()">

■ 配列変数を使った画像の切り替え処理

配列変数を使って、画像を一定の時間ごとに切り替えて表示する処理を記述します。

<SCRIPT LANGUAGE="JavaScript">
<!--
var i=1;
var j=1;
picture=new Array();
for(i=1; i<=5; i++){
picture[i] = new Image();
};
picture[1].src = "kaibosshi.jpg";
picture[2].src = "gyuuitame.jpg";
picture[3].src = "happouhan.jpg";
picture[4].src = "toufu.jpg";
picture[5].src = "tubame.jpg";

function slideshow(){
img1.src= picture[j].src;
j++;
if(j>=6){
j=1
};
setTimeout("slideshow()",1000);
}
//-->
</SCRIPT>

 配列変数

この例では、まずpicture[1]に「kaibosshi.jp」、picture[2]に「toufu.jpg」のように、picture[ ]という配列変数に表示させたい順番に画像ファイルを格納しています。次に、「img1.src= picture[j].src」のようにスクリプトを記述し、変数[j]の値を変更することで配列変数に格納した画像を順番に切り替えて表示しています。この操作は、例041のようにファイル名に連番名をつけなくても、一旦配列変数に格納することで連番のように扱えるようにしていることがポイントです。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box