banner01  スライドショー用
  JAVAスクリプト公開
目次
特徴・ご利用方法

利用手順 [ 基本編 ]
   手順 [ 応用編 ]
FAQ 良くある質問
用語集
定義ファイル作成ツール
切替効果確認ツール
利用連絡フォーム
画像一覧HTM作成ツール
改訂履歴
改訂互換対応表
説明文改訂記録
 Home  

   スライドショー
画像定義ファイル slide_data.js → 画像一覧ページ HTML文 作成ツール

                         2003.3 Ver1.0   
   [ 画像一覧HTML変換ツールへ ]

1 目的


  当サイトで公開しているスライドショースクリプトの、画像定義ファイル slide_data.js から、
  一連のスライドショーの画像を一覧ページで公開するためのHTML文作成用コンバータです。

  一覧ページの例  [ こちらから ] スライドショーまたは [ メニュー ]から一覧ページにリンクします。


2 画像一覧ページを設けるメリット

  スライドショーでは時間毎に切替ながら複数の画像を見ていただく仕組です。
  これに画像一覧ページを並行して置くと次のようなメリットがあります。

 (1) 時間毎に切り替わるのが煩わしいと感じられる訪問者に、じっくり見ていただくことが出来ます。
   またスライドショー内の他の画像を交互に見たい時、スクロール操作で見られるので便利なこともあります。

 (2) このスライドショーの表示に JAVAスクリプトを使用しています。
   JAVAスクリプトが動作しないか、対象バージョン以前のブラウザでは表示できない可能性があります。
   Windows 95の一部バージョンで、インターネットエクスプローラ ver.3.x ではスライドショーは動作しません。
   この場合は画像一覧で見ていただくよう案内、一覧ページへリンクをすることで代替え機能となります。

 (3) スライドショーの画像や説明文は、データで表示されるので、HTML文からの検索エンジンへの自動登録がなされません。 画像一覧ページはHTML文で作成するので、内容が登録される可能性が出ます。

 このように画像一覧ページを置くことはメリットがありますが、スライドショーの他に別途一覧ページを編集する手間が掛かり面倒なことも事実です。
これを最小限の作業で実現するために、このツールを用意しました。

.
3 画像一覧ページ作成の手順 (基本編)

 3.1 準備
 ( 複数スライドショーに対し 1度だけ実施 )

 1) 貴方のページのイメージに合わせた 画像一覧基本ページ ; 背景・タイトル・戻りボタンなどだけを貼り付けたページを作成しておきます。

 一覧画像を貼り付ける目印に 
「 この下に画像一覧を貼り付け 」などと書いておきます。

 2) 画像一覧 HTML文 作成ツール を貴方のコンピュータに保存します。

  ☆ 方法詳細 ;
  この ツールページ のリンク文字を右クリックし
  [対象をファイルに保存] で保存します。
  ファイル名は tool_js_pic_conv01.htm となっています。
( ファイル−名前を付けて保存 ではアドレス指定が変化し、正しく動作しません )

 以上は最初に作成したファイルを保存しておき、以降 別の画像一覧ページを作る時、保存したファイルを利用します。
.

1) 画像一覧基本ページの例
 
 *****写真集
 スライドショー 桜いっぱい!

 この下に画像一覧を貼り付け



  ご自分のロゴ、タイトル、背景の設定
  ホーム、戻りボタンなどを貼ったファイル
  を容易しておきます

 3.2 スライドショー毎に実施

 3) tool_js_pic_conv01.htm ファイルを一覧を作成したい定義ファイルの入っているフォルダに貼り付けます。
 この説明文の基本的なフォルダでいうと slide01 フォルダです。

 4) slide01 フォルダに貼り付けられた tool_js_pic_conv01.htm を実行します。
 ( エクスプローラで、このファイル名をダブルクリック )

それ以降はツールの説明に従って下さい。 ( 下の応用編はひとまず飛ばして実行して下さい )

 [ 画像一覧HTML変換ツールへ ]
.
4 画像一覧ページ作成ツールの応用  (応用編)

 4.1 既定値の変更


  毎回罫線の仕様を変更をする場合、既定値を変更します。
 tool_js_pic_conv01.htm ファイルの最初に定義がありますので変更して下さい。
 一回だけ指定を変える場合は、ツールで設定します。
.

var TBborder  = 8 // テーブル罫線幅
var TBspacing = 5 // テーブルのセル間のスペース
var TBpadding = 3 // テーブルのセル内のスペース
var TBlightcolor  = "#C0C0C0" // テーブルの明るい罫線の色
var TBdarkcolor  = "#808080" // テーブルの明るい罫線の色
var TBback_color = "#FFFFE0" // 罫線枠内背景色
var Comment_width= 600 // 説明文表示幅
var COMcolor_v ="#000000" // 説明文文字色 #000000 の時はslide_data.js ファイルでの指定に従います
           この値に #000000 以外を指定すると 画像一覧ページの説明文文字色を変更できます