Comical Script

画像切り替えスクリプト

2005/07/14 (Ver 0.5.2)

用途・特徴・機能

• 同サイズの連番画像をボタン操作でスライドショウ的に切り替えます。
  複数のページを用意する手間が要りません。
• ページの切り換えは、選択リスト、直接入力、ボタン(次,前)及び、URL参照の四つの方法が有ります。
  URL参照については、質問応答(FAQ)をご覧ください。
• メニューボタン類の二カ国語対応します。
  外国人(英語圏)向けのナビゲーションにも対応してバイリンガルです。
  要か不要は、別として...。
• エラーメッセージ(ダイアログ)表示によって誤った操作に応答します。
  「ウザイ＆お節介」な場合は、当然 非表示にする事も可能です。
• ページ上の対象画像をダブルクリックすると画像のみを表示します。
  使用画像が大きい為に、小さく幅や高さを指定した場合などに便利です。
  なお、Netscape 4や、Opera 6は、ダブルクリックに対応していないので画像を一回押すだけで反応します。
• ページの自動トップフォーカスが可能です。
  自動スクロールを、「はい」にすると画像を変更する毎にウェブページを上にスクロールさせます。
  使用画像が、ブラウザ画面に対して縦に長い場合等に便利です。

ダウンロード & 使用例

• サンプルページ (HTML 4.01 Transitional)
• サンプル動作用 PNG画像 三個 (29.3 KB) → comic_01.png comic_02.png comic_03.png

取り扱い注意点、基礎知識と設定方法

取り扱い注意点

もしも、「comic.html」と言うファイル名以外でこのスクリプトを使用する場合、...
table タグ(要素)を取り囲む
<form id="pages" name="pages" action="comic.html">
の action属性値の中身を、HTMLページファイル名に合せる必要が有ります。

action属性値の内容をファイル名に合せなかった場合、URL参照機能で何らかの不具合が出る事が有りますのでご注意ください。URL参照機能については、質問応答(FAQ)をご覧ください。

値の基礎知識

設定値を書き換える際の最低限のお約束です。

• 数値 ... 数値データを指定します。
  (例) = 1;
• 文字列 ... 文字列データを "引用符" で括ります。
  (例) = "abcdefg"
• 真偽値 ... 真偽値データを指定します。「はい(真)」ならば true、「いいえ(偽)」ならば falseです。
  (例) = true;

基本設定

ページをテキストエディタで開くと、/* 基本設定 ここから */ 〜 /* 基本設定 ここまで */ と有りますので、その設定箇所を矛盾無く書き換えてください。

• minPage ... ページの最小(最初)の 数値 を指定します。
  (例) minPage = 1;
• maxPage ... ページの最大(最後)の 数値 を指定します。
  (例) maxPage = 3;
• imgUrl ... 連番画像ファイル名の前半 文字列 を指定します。
  (例) imgUrl = ".\/comic_";
• imgKeta ... 連番画像ファイル名の後半桁(ページ揃え桁)の 数値 を指定します。
  ここで言う揃え桁とは、100は、三桁ですが、2は、一桁ですね？ そこで、2の先頭から 0文字を二つ加えて 002としてファイル連番数値部分を三桁に合せる事を示します。
  (例) imgKeta = 2;
• imgFormat ... 画像ファイルの種類(拡張子のみ) 文字列 を指定します。
  (例) imgFormat = "png";
• imgTarget ... 入れ替え対象となる画像ファイルの固有ID及び、NAME 文字列 を指定します。
  ここを変更すれば、対象html側のimgタグ内容(id,name)も変更せねばなりません。
  (例) imgTarget = "imgObj";
• imgJump ... 画像ファイルのみを表示するダブルクリックイベントの 真偽 を指定します。
  (例) imgJump = true;
• multiLang ... メニューボタン類の二カ国語設定の 真偽 を指定します。
  (例) multiLang = true;
• userLang ... メニューボタン類の基本言語 文字列 を指定します。
  (例) userLang = "ja";
• errMsg ... エラーメッセージ表示の 真偽 を指定します。
  (例) errMsg = false;
• maxMsg ... 指定値がページの最大値を超えている時の警告 文字列 を指定します。
  (例) maxMsg = "選択は、最大 "+maxPage+" ページまでです。";
• minMsg ... 指定値がページの最小値を超えている時の警告 文字列 を指定します。
  (例) minMsg = "選択は、最小 "+minPage+" ページからです。";
• nanMsg ... 指定値が数値以外の値を指定している時の警告 文字列 を指定します。
  (例) nanMsg = "数値以外のページ入力指定が行われました。";
• jumpMsg ... 画像を押した際に、画像のみを表示するか否かの確認メッセージ 文字列 を指定します。
  この機能は、ダブルクリック未対応のブラウザ(Opera 6, Netscape 4)のみの確認メッセージです。
  (例) jumpMsg = "現在表示中の画像のみをブラウザで表示しますか？";

質問応答 (FAQ)

URL参照という方法で画像の切り換え指定が出来るそうですが、どのような仕組みで使用できますか？

URL参照は、URLに?接続子を介して文字変数データを加える方法です。 インターネットでは、cgiや、asp等の拡張子の横に ?data=abc&post=123等の文字列が付いている事がありますよね？。

このJavaScriptは、一般的な cgi プログラムの様に、URL中の文字変数データを解釈して一部の要素対して動的にページ反映させる事が可能です。

例えば、このサンプル 2ページ目へのリンク comic.html?page=2 をクリックすると、 JavaScriptが、送られたURLの中からページ指定データを解釈して最初から2ページ目を読むことが出来ます。
他にも、comic.html?page=topで 最初(最小)のページ、comic.html?page=lastで 最後(最大)のページにも指定できます。.html拡張子の横に付加すると覚えてください。

テキストエディタなどでページ改造する際に、JavaScriptやスタイルシートの行があって編集しにくいのですが？

外部スクリプト(js)や、外部スタイル(css)ファイル化して メンテナンス性を高めてください。→ サンプルページ

• スクリプトファイルの場合は、
  <script type="text/javascript" charset="Shift_JIS" src="comic.js"></script>
• スタイルシートファイルの場合は、
  <link rel="stylesheet" type="text/css" charset="Shift_JIS" media="all" href="comic.css">

上記の様にするとメンテナンスが楽になって便利でしょう。

ページを切り替えする毎に、作品に対する作者のコメント等が表示できたりしたら嬉しいのですが...。

質問内容や、難易度にもよりますが改造依頼は、メールや、通常掲示板 (質問、雑談)にて相談してください。
対応出来る範囲内でアドバイスさせていただきます。
その際は機能追加によって、対応ブラウザがさらに限定的になったりする場合も有りますのでご容赦ください。

なお、違法コンテンツ(不正な写真、違法コピー)等を取り扱っているサイト様は、ご依頼をお断りいたします。

既知の問題

• 異なる画像形式や、異なる画像サイズ(縦横比率)同士は使用対象としていません。 対象画像の形式は、揃えてください。

更新履歴

Ver.0.5.2 [2005/07/14]

自動スクロールにラベルクリックを追加。

URL参照時機能の不具合を修正。

Ver.0.5.1 [2004/06/06]

URL参照時機能時に、ロック制御をしていないバグを修正。

Opera 6や、Netscape 4 でダブルクリック時に、画像のみ表示機能が動作しない問題の対策を追加。

Ver 0.5.0 [2004/06/04]

URL参照によるページ指定機能の追加。

>> 以前の更新履歴 (txt) [Shift_JIS]