スライドショー テスト

1行3列の表の2列目にスライドショーを表示させます。1列目、3列目は静止画を表示させます。

スライドショーは「Javascript」というプログラムを使用します。


@まずは、同じ大きさの画像を5枚用意し画像を保存するフォルダ(imageなど)にコピーします。上記例では、160×120ピクセルの画像を5枚用意しました。

A表の1列目、3列目に画像を挿入します。

Bスライドショーを表示させたいセルのHTMLソースを探します。 ヒント:<td></td> で囲まれたタグを探してみましょう。

CBで探したHTMLソースの<td></td>のタグの間に下記のJavascriptを貼り付けます。

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
// 任意の画像ファイル名にして下さい
G1="IMGP0076_2.JPG";
G2="IMGP0078_2.JPG";
G3="IMGP0080_2.JPG";

document.write('<CENTER><IMG src=G1 name="A"></CENTER>');
M=G1;
cnt=0;
function SH(){
document.A.src=M;
cnt++;
if(cnt==1 && M==G1){M=G2;}
if(cnt==2 && M==G2){M=G3;}
if(cnt==3 && M==G3){cnt=0;M=G1;}
// 2500は画像の切り替え速度
setTimeout("SH()",2500);
}
SH();
// -->
</SCRIPT>

DJavascript内の// 任意の画像ファイル名にして下さい と記述された下の画像を@で保存したものに書き換えます。 

Eページ編集画面では、2列目はスライドショー部分は(S)と表示されています。プレビュー画面で出来上がりを確認してみましょう。