「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

1枚ずつ説明をつけスライドショー

パソコンお助け情報

ホームページ作成

困った ブラウザで1枚ずつ説明をつけた写真のスライドショーを自動的にするにはどうしたらよいか。

解決した 説明と写真を表示するHTMLファイルを作り、Java Scriptにより一定時間順に表示させます。

連続してページを表示させるときに、写真や説明の位置がずれると見難くなりますから、説明と写真を表示するHTMLファイルは同じレイアウトにします。

説明と写真を表示するHTMLファイルが、photo1.html、photo2.html、photo3.html、photo4.html、photo5.htmlの5個があり、スライドショーを実行するページがslideshow.htmlとします。

  1.  slideshow.htmlの<head>要素の中に次のスクリプトを書きます。
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script language="javascript">
    <!--
    function wopen1(){
    window.open("photo1.html","windowopen1","status=yes,menubar=yes,scrollbars=yes,resizable=yes width=xxx height=yyy")}
    //-->
    </script>
    ここでwidth=xxx height=yyyのxxxとyyyは、photo1.htmlページを開くウインドウの大きさをピクセルで指定する。
  2.  slideshow.htmlの<body>要素の中の「スライドショウ・開始」ボタンを表示させるところに、次のタグを記入する。
    <form>
    <input onclick=wopen1() type=button value="スライドショウ・開始">
    </form>
  3.  photo1.htmlの<head>要素の中に次のスクリプトを書きます。
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script language="javascript">
    <!--
    function GoNext() {location.href="photo2.html"}
    // -->
    </script>
  4.  photo1.htmlの<body>タグの中の属性に次のように記入します。
    onLoad="setTimeout ('GoNext()',5000)"
    ここで5000 はこのページを完全に読み込んでから表示させている時間。1秒間=1000
    例:<body onLoad="setTimeout ('GoNext()',5000)">
  5.  同様にphoto2.html〜photo4.htmlまで順に次のページへジャンプするように設定します。
  6.  photo5.htmlの次にslideshow.html へジャンプさせれば、スライドショーを終わって元のページに戻ります。また、photo1.htmlへジャンプするようにすれば、エンドレスに表示します。

この方法では途中で戻ることは出来ません。スライドショーのブラウザを閉じれば元のslideshow.htmlが表示されます。スライドショウ中の制御をするには、進む・戻るのボタンをつける方法があります。(別項で説明)

(2005/7/8 UP) サンプルのページへJavaScript を使っています。


「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

作成&連絡先 NET・陽だまり