WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:大量の画像からの選択表示

0:[投稿] 紅葉 [MAIL] [URL] [2002/10/17 14:58 ][環境:WIN+NN UNIX系+C]

西暦年月旬で一義的に決まる画像が約7000枚あります。テスト的に20年分 年、月、旬のプルダウンメニューで選択し、その合成として画像を指定、表示することは出来たのですが、200年近くの年をプルダウンするのは現実的でありません。また、imageファイルの中にその枚数を散らかすのも整理がつきませんimage/year/画像名としたいのです。試みたこと yearの部分をinput文に変え、画像の指定を上記のようにしたが、その部分がおかしいか、思考錯誤で検討していますがうまく行きません。
解決の糸口があればと質問しました。よろしくお願いします。
以下 動いている フレームの左ページです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML lang="ja">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>メニュー</TITLE>
</HEAD>
<body BACKGROUND="image/bk4.gif">
<script language="JavaScript">
<!--
function drweather(formobj, targetframe){
 var dw1;
 var year=formobj.year.value;
 var month=formobj.month.value;
 var period=formobj.period.value;
 var imagefile=year+"-"+month+period+".png";
 dw1=window.open("",targetframe);
 dw1.document.open();
 dw1.document.write("<html lang='ja'><head>");
 dw1.document.write("<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>");
 dw1.document.write("<title>Weather Map</title></head><body>");
 dw1.document.write("<body BACKGROUND=image/bk4.gif></body>");
 dw1.document.write("<body><img src='image/",imagefile,"'>");
 dw1.document.write("</body></html>");
 dw1.document.close();
 return false;
}
//-->
</script>
年月旬を選び、[表示]ボタンを<br>
押してください。<br>
<form name="form1" onsubmit="return drweather(this, 'weather')">
 <select name="year">
   <option value="1781">1781年</option>
   <option value="1782">1782年</option>
   <option value="1783">1783年</option>
   <option value="1784">1784年</option>
   <option value="1785">1785年</option>
   <option value="1786">1786年</option>
   <option value="1787">1787年</option>
   <option value="1788">1788年</option>
   <option value="1789">1789年</option>
   <option value="1790">1790年</option>
   <option value="1791">1791年</option>
   <option value="1792">1792年</option>
   <option value="1793">1793年</option>
   <option value="1794">1794年</option>
   <option value="1795">1795年</option>
   <option value="1796">1796年</option>
   <option value="1797">1797年</option>
   <option value="1798">1798年</option>
   <option value="1799">1799年</option>
   <option value="1800">1800年</option>
</select>
 <select name="month">
   <option value="01">1月</option>
   <option value="02">2月</option>
   <option value="03">3月</option>
   <option value="04">4月</option>
   <option value="05">5月</option>
   <option value="06">6月</option>
   <option value="07">7月</option>
   <option value="08">8月</option>
   <option value="09">9月</option>
   <option value="10">10月</option>
   <option value="11">11月</option>
   <option value="12">12月</option>
 </select>
 <select name="period">
   <option value="a">上旬</option>
   <option value="b">中旬</option>
   <option value="c">下旬</option>
 </select>
 <input type="submit" value="表示">
<hr width="50%" size="2" color="#c0c0c0">

</form>

<P>
<FONT SIZE="2">天気記号(拡大されています)</FONT><BR>
<P aligin="CENTER"><IMG SRC="image/tkigo3.png"</P>
<hr width="50%" size="2" color="#c0c0c0">
<pre><small>天気図表示を終わる場合は右上の×を使う</small></pre>
</body>
</HTML>


1:[回答] Malic [2002/10/17 15:19 ]

var imagefile=year+"-"+month+period+".png";

var imagefile=year+"/"+month+period+".png";

dw1.document.write("<body><img src='image/",imagefile,"'>");

dw1.document.write("<body><img src='image/'"+imagefile +">");

かな。

あと、子ウインドウ内のソースを綺麗にしたければ、
document.write() → doxument.writeln("") にすると、
ソースが改行されます。


2:[回答] Malic [2002/10/17 15:20 ]

dw1.document.write("<body><img src='image/",imagefile,"'>");

dw1.document.write("<body><img src='image/'"+imagefile +">");

訂正
dw1.document.write("<body><img src='image/"+imagefile +"'>");


3:[回答] Malic [2002/10/17 15:24 ]

もう2点、、、 
子ウインドウに body が2個あります。1個にしましょう。

dw1.document.write("<body BACKGROUND=image/bk4.gif></body>");

dw1.document.write("<body BACKGROUND='image/bk4.gif'>");

ここの画像ファイル名もコーテーションでくくりましょう。


4:[関連] 紅葉 [MAIL] [URL] [2002/10/17 17:52 ]

早速の回答ありがとうございます。一寸直したという感じでテスト
しましたが、うまく行きません。もうカンマ、ピリ判別出来ない老眼ですので、今夜ゆっくりテストしてみます。一寸きになったのが
画像名は西暦年+”−”月+旬です。たとえば西暦1781年8月上旬
という画像の名前は1781-08aです。これは画像作成段階で自動的に
付されてきますので変えられません。今回の指定では
img/1781/1781-08aと指定する必要があります。お教え頂きました
ことでこの辺も読み替えて調べています。紅葉


5:[回答] Malic [2002/10/17 18:24 ]

var imagefile=year + "/" + year+"-"+month+period+".png";

になりますね。(念のため)


>もうカンマ、ピリ判別出来ない老眼ですので、

ブラウザに表示されているソースは見にくいですよね・・・
メモ腸とかに、こぴぺすると見やすいですよ。


6:[質問] 紅葉 [MAIL] [URL] [2002/10/18 10:37 ]

昨夜からテスト結果をご報告します。出来ればアドバイスお願いいたします。
A ご教示頂いた部分を書き直し、年に関してはselect文のまま
B ご教示頂いた部分を書き直し、年に関してはinput文に変更
データをimage/year/その年の画像、としたものと、従来のimage/毎年の画像、としたものが読めるか試しました。結果は読みに行くが読めないらしい。年月旬を指定して表示ボタンを押すとURLの位置に、1782年4月上旬の画像を指定したとすると
前省略 G:/test/menuhtm?yaer=1782&month=04&period=aと表示
されます。表示はA,Bで同じなので、読みに行かせ方の問題かと
考えています。



7:[関連] 紅葉 [MAIL] [URL] [2002/10/18 11:12 ]

menuの後に”.”が落ちていました。
file:///G:/test3/menu4.htm?year=1782&month=04&period=c


8:[回答] 紅葉 [MAIL] [URL] [2002/10/18 11:13 ]

menuのあとに . が落ちていました。
file:///G:/test3/menu4.htm?year=1782&month=04&period=c


9:[回答] Malic [2002/10/18 11:39 ]

子ウインドウに画像を表示するだけなら、submit する必要ないです。(submitするならCGI作らないと何も返ってきません)

イベントハンドルでフォーム名を渡すときの書き方


<input type="submit" value="表示">

<input type="button" value="表示" onClick="drweather(this.form, 'weather')">
this → this.form

ネスケで、selectの選択されている値を見る方法も違ってますね。
(現在の書き方はIEのみしか使えません)
var year=formobj.year.value;

var year=formobj.year[formobj.year.selectedIndex].value;

以下修正後。(NN4.6と7.0でテスト済み)

<HTML lang="ja">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>メニュー</TITLE>
</HEAD>
<body BACKGROUND="image/bk4.gif">
<script language="JavaScript">
<!--
function drweather(formobj, targetframe){
var dw1;
var year=formobj.year[formobj.year.selectedIndex].value;
var month=formobj.month[formobj.month.selectedIndex].value;
var period=formobj.period[formobj.period.selectedIndex].value;
var imagefile=year + "/" + year + "-" + month + period + ".png";
dw1=window.open("",targetframe);
dw1.document.open();
dw1.document.write("<html lang='ja'><head>");
dw1.document.write("<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>");
dw1.document.write("<title>Weather Map</title></head><body>");
dw1.document.write("<body BACKGROUND='image/bk4.gif'>");
dw1.document.write("<img src='image/"+imagefile+"'>");
dw1.document.write("</body></html>");
dw1.document.close();
return false;
}
//-->
</script>
年月旬を選び、[表示]ボタンを<br>
押してください。<br>
<form name="form1" onsubmit="return drweather(this, 'weather')">
<select name="year">
  <option value="1781">1781年</option>
  <option value="1782">1782年</option>
  <option value="1783">1783年</option>
  <option value="1784">1784年</option>
  <option value="1785">1785年</option>
  <option value="1786">1786年</option>
  <option value="1787">1787年</option>
  <option value="1788">1788年</option>
  <option value="1789">1789年</option>
  <option value="1790">1790年</option>
  <option value="1791">1791年</option>
  <option value="1792">1792年</option>
  <option value="1793">1793年</option>
  <option value="1794">1794年</option>
  <option value="1795">1795年</option>
  <option value="1796">1796年</option>
  <option value="1797">1797年</option>
  <option value="1798">1798年</option>
  <option value="1799">1799年</option>
  <option value="1800">1800年</option>
</select>
<select name="month">
  <option value="01">1月</option>
  <option value="02">2月</option>
  <option value="03">3月</option>
  <option value="04">4月</option>
  <option value="05">5月</option>
  <option value="06">6月</option>
  <option value="07">7月</option>
  <option value="08">8月</option>
  <option value="09">9月</option>
  <option value="10">10月</option>
  <option value="11">11月</option>
  <option value="12">12月</option>
</select>
<select name="period">
  <option value="a">上旬</option>
  <option value="b">中旬</option>
  <option value="c">下旬</option>
</select>
<input type="button" value="表示" onClick="drweather(this.form, 'weather')">
<hr width="50%" size="2" color="#c0c0c0">

</form>

<P>
<FONT SIZE="2">天気記号(拡大されています)</FONT><BR>
<P aligin="CENTER"><IMG SRC="image/tkigo3.png"</P>
<hr width="50%" size="2" color="#c0c0c0">
<pre><small>天気図表示を終わる場合は右上の×を使う</small></pre>
</body>
</HTML>


10:[保留] 紅葉 [MAIL] [URL] [2002/10/18 12:42 ]

大変ご丁寧にご指導ありがとうございます。ただ老齢と浅学の身
には理解しがたい点もありますが、教科書をひっくり返して調べてみます。そのなかで一番理解しがたいのははじめの質問でのHTML文
は、当然子ページの設定文も同じフォルダーに入っていて、データもありますから画像表示します。同様の環境で今朝報告いたしましたテストを行いましたので、GCIが設定されていない?うん?
週末はネットワーク環境から離れますので、ノートPC上で試して
来週、結果を報告(いい報告でありたい)いたします。


11:[完了] 紅葉 [MAIL] [URL] [2002/10/21 13:40 ]

おかげさまでNN6.1,IE5.0?で表示が可能になりました。ただし
2:回答 訂正、3:回答</body>ダブリのとる。5:回答:念のための 3つの部分の修正でした。ご丁寧に作成頂いたNN専用
の書き方では、NN7.0を入れてないので、試していませんが、当初の目的は達成できました。まだいろいろ分からない点があります、またお世話になるかと思いますがよろしくお願いします。
ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World