ベストアンサー

変数を送る方法?(CGIの「**.cgi?mode=00&name=aa.jpg」的な物)

2004/03/11 16:51

1ページに複数の画像があり、画像クリックで拡大写真を小窓で開くようにしたいです。枚数分ページ(htmlファイル)を準備するのは避けたいです。自動生成の方でやりたいと思います。その際、少しでも入力を減らしたいと思うのですが… 現在は以下のようになっています。 --- <SCRIPT language="JavaScript"> <!-- function wopen1(){ wo1=window.open("","WindowOpen1", "width=800,height=700"); wo1.document.write("<html><head><title>画像名</title>"); wo1.document.write("<script language='JavaScript'>"); wo1.document.write("function good(){"); wo1.document.write("window.close() }"); wo1.document.write("</script>\n</head>\n<body>"); wo1.document.write("写真名-コメント"); wo1.document.write("<IMG src='写真パス'>"); wo1.document.write("<center>"); wo1.document.write("<form>"); wo1.document.write("<input type='button' name= 'ok ' value=' Close ' onClick='good()'>"); wo1.document.write("</form>"); wo1.document.write("</center>\n</body>\n</html>"); wo1.document.close(); } (これが写真枚数分) これと、 <A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス"～これの組み合わせです。これを、 wo1.document.write("<html><head><title>[CGIで言う所の$name的な表現]</title>"); と <A href="javascript:void(0)" onclick="wopen1([CGIで言う所の?name=00&pict=01.jpg的な表現])"><IMG src="写真サムネイルパス"～で済ませたいのですが、可能でしょうか? その場合、どのように記述したらいいのでしょうか? 出来ればピンポイントで教えていただけるとありがたいのですが… よろしくお願いします。

master-3rd
お礼率39% (524/1325)

JavaScript
回答数9
ありがとう数2

みんなの回答 （9）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#199778

2004/03/12 19:02 回答No.7

呼び出し側の条件によって、関数の処理の内容の一部を変更したい場合は、関数に引数を渡してやって、その引数を利用する形で関数内の処理を定義すればよいと思います。この場合は、配列などを利用し、引数としてその配列の要素番号を渡すようにすると、管理しやすいと思います。例えば、以下のようなソースではいかがでしょうか。 script部分 <script type="text/javascript"> </script> 呼び出し側の例： <A href="javascript:void(0)" onclick="wopen(0,'画像0')"><IMG src="画像0のサムネイルパス"></a> <A href="javascript:void(0)" onclick="wopen(3,'画像3')"><IMG src="画像3のサムネイルパス"></a> 上記のソースでは、スクリプトの方であらかじめ別ウィンドウに表示する画像のURLと、それに対するコメント文を配列に収めています。そして、関数wopen()の方では、呼び出し側から引数を受け取るようにし、その引数によって別ウィンドウに表示する内容を変更しています。関数wopen()の引数は、iが配列要素の番号として、pnameが画像名として利用されるようにしてあります。関数を呼び出す側の記述を整理すると、「wopen("目的の画像が格納されている配列の要素番号","タイトルバー(写真名)部分に表示されるテキスト")」という形で関数を呼び出せば、目的の動作が得られると思います。こうすると、呼び出し側の引数に子ウィンドウに呼び出そうとしている画像のタイトルを書き込む必要があるので、手間が分散してしまう感もありますが、HTMLソースを見たときに何をどう管理しているのかの見通しが若干つけやすくなる利点もあると思います。参考まで。

質問者

お礼 2004/03/13 17:16

ありがとうございます。完璧です。何とかページも出来上がりました。

その他の回答 (8)

wolv
ベストアンサー率37% (376/1001)

2004/03/12 20:19 回答No.9

質問文の <A href="javascript:void(0)" onclick="wopen1([CGIで言う所の?name=00&pict=01.jpg的な表現])"><IMG src="写真サムネイルパス"～とするための回答（動作未確認）：呼び出されるHTMLファイルをひとつつくります。 image.htmlという名前とします。 <html><head> <script> url=document.URL.split("?") query=url.split("&") info = new Array() for(i=0;i<query.length;i++){ keyValue=query[i].split("=") info[keyValue[0]]=keyValue[1] } </script> function good(){ window.close() } document.writeln("<title>"+info["title"]+"</title>") </script> </head> <body> <script> document.writeln(info["comment"]) document.writeln("<img src=\""+info["path"]+"\">") </script> <form> <input type='button' name= 'ok ' value=' Close ' onClick='good()'> </form> </center> </body> </html> 以上がimage.htmlの内容。呼び出す側のHTMLでの記述は以下のようにします。１．ヘッダー部分に <script> function wopen1(url){ wo1=window.open(url,"WindowOpen1","width=800,height=700"); } </script> と書く。２．サムネイルのところに <a href="javascript:void(0)" onclick='wopen1("image.html?title=00&comment=comment1&path=01.jpg")' ><img src="写真サムネイルパス"></a> などと書く。 title=の後に書いたのが子Windowのタイトルとしてに、 comment=の後に書いたのが子Windowでの画像の上に、 path=の後に書いたのが子Windowの<img>のsrcとして使われるはずです。

wolv
ベストアンサー率37% (376/1001)

2004/03/12 19:57 回答No.8

質問文の <A href="javascript:void(0)" onclick="wopen1([CGIで言う所の?name=00&pict=01.jpg的な表現])"><IMG src="写真サムネイルパス"～っぽくするためのヒント： image.htmlという名前のファイルのヘッダー部分に <script> url=document.URL.split("?") query=url.split("&") info = new Array() for(i=0;i<query.length;i++){ keyValue=query[i].split("=") info[keyValue[0]]=keyValue[1] } </script> と書いておくと、 <a href="image.html?title=hogehoge&imgurl=image2.html">image2</a> のように呼び出すことで、 image.htmlの中の<script></script>の中で、 info["title"] info["imgurl"] として参照できるようになります。ローカルで試すと「image.html?title=hogehoge&imgurl=image2.htmlっていう名前のファイルはない」ということで失敗しますが、サーバーにアップロードすると多分うまく動作します。（geocitiesでは動作確認ずみ）

wolv
ベストアンサー率37% (376/1001)

2004/03/12 16:34 回答No.6

「サムネイルが表示されない」についてですが、 i++;gz[i]="画像名１"; sc[i]="写真名-コメント１"; pp[i]="写真パス１";tn[i]="サムネイルパス１" の直前あたりに gz=new Array() sc=new Array() pp=new Array() tn=new Array() の４行を追加してください。忘れてました。ごめんなさい。

wolv
ベストアンサー率37% (376/1001)

2004/03/12 16:30 回答No.5

追加する画像の情報は、ヘッダー部分の i++;gz[i]="画像名●●"; sc[i]="写真名-コメント●●"; pp[i]="写真パス●●";tn[i]="サムネイルパス●●" のところに追加してください。

wolv
ベストアンサー率37% (376/1001)

2004/03/12 16:25 回答No.4

表にする場合だと、適当なところで行を変えたいと思うので、 forの前で cmax=5 //横方向にいくつ表示するか。 c=0 //現在までに横方向にいくつ表示したか数えるカウンタという初期設定をして、 <td>・・・</td>を出力する前後を if(c==0)document.writeln("<tr>") と c++ if(c>=cmax){ document.writeln("</tr>") c=0 } ではさみ、さらにfor文の後で if(c!=0)document.writeln("</tr>") のような処理を追加するといいと思います。上記の変更を加えると、「<table>・・・</table>」部分を出力するHTMLは以下のようになります。 <table> <tr> <script> cmax=5 c=0 for(i=1;i<=n;i++){ if(c==0)document.writeln("<tr>") document.writeln("<td><A href=\"javascript:void(0)\" onclick=\"wopen1("+i+")\"><IMG src=\""+tn[i]+"\"></td>") } c++ if(c>=cmax){ document.writeln("</tr>") c=0 } </script> </table>

wolv
ベストアンサー率37% (376/1001)

2004/03/12 16:17 回答No.3

目的が、 <A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス１"></a> <A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス２"></a> <A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス３"></a> ：というHTMLを生成することだと思ってNo1の回答をしたんですが、 <table> <tr> <td><A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス１"></a></td> <td><A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス２"></a></td> <td><A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス３"></a></td> </table> のようにしたい、ということですか？そうだとすれば、 <script> for(i=1;i<=n;i++){ document.writeln("<A href=\"javascript:void(0)\" onclick=\"wopen1("+i+")\"><IMG src=\""+tn[i]+"\">") } </script> ではなく、 <table> <tr> <script> for(i=1;i<=n;i++){ document.writeln("<td><A href=\"javascript:void(0)\" onclick=\"wopen1("+i+")\"><IMG src=\""+tn[i]+"\"></td>") } </script> </table> としてください。ポイントは、JavaScriptのfor文の中で<td>と</td>も出力する、という点です。

質問者

補足 2004/03/12 16:57

返答ありがとうございます。すでに表自体は出来上がっているので、 <A href="javascript:void(0)" onclick="wopen1()"><IMG src="01s.jpg" border="0"></A> を書き換えるだけで出来ると言う感じには出来ませんか? (<A href="javascript:void(0)" onclick="wopen1("1行目を指定")">的な方法で…なので、ヘッダー部分のサムネイルに関する指定は必要ないかもしれません) レイアウトとデザインを重視するあまり、表の中に表を入れて…という入れ子状態になっているため応用するのがちょっと難しそうです。よろしくお願いします。

wolv
ベストアンサー率37% (376/1001)

2004/03/12 16:11 回答No.2

「サムネイルが表示されない」についてですが、とりあえず、 document.writeln("<A href=\"javascript:void(0)\" onclick=\"wopen1("+i+")\"><IMG src=\""+tn[i]+"\">") の「<IMG src」を「<IMG src」とか、単に「<」を削除して「IMG src」とするとかして、想定どおりのIMGタグが出力されているかどうか確認してみてください。

wolv
ベストアンサー率37% (376/1001)

2004/03/11 18:46 回答No.1

リクエストされた形式と違いますが、ヘッダー部分のスクリプトを <SCRIPT language="JavaScript">  </script> として、 <A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス"～のかわりに <script> for(i=1;i<=n;i++){ document.writeln("<A href=\"javascript:void(0)\" onclick=\"wopen1("+i+")\"><IMG src=\""+tn[i]+"\">") } </script> とするのはどうでしょう。

質問者

補足 2004/03/11 19:36

返答ありがとうございます。やってみましたが、うまく動作しません。サムネイルが表示されないのですが、なぜでしょう? <TD bgcolor="#000000" width="130" align="center"> <SCRIPT> for(i=1;i<=n;i++){ document.writeln("<A href=\"javascript:void(0)\" onclick=\"wopen1("+i+")\"><IMG src=\""+tn[i]+"\"></A>") } </SCRIPT></TD> ちなみに、2個目以降はどこを書き換えたらいいのでしょうか? よろしくお願いします。

変数を送る方法?(CGIの「**.cgi?mode=00&name=aa.jpg」的な物)