ウォッチ
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="写真サムネイルパス"～
で済ませたいのですが、可能でしょうか?
その場合、どのように記述したらいいのでしょうか?
出来ればピンポイントで教えていただけるとありがたいのですが…
よろしくお願いします。
No.7ベストアンサー
- 回答日時：
呼び出し側の条件によって、関数の処理の内容の一部を変更したい場合は、関数に引数を渡してやって、その引数を利用する形で関数内の処理を定義すればよいと思います。
この場合は、配列などを利用し、引数としてその配列の要素番号を渡すようにすると、管理しやすいと思います。
例えば、以下のようなソースではいかがでしょうか。
script部分
<script type="text/javascript"><!--
imgsrc= new Array(); //画像のURLを格納する配列を作成
imgtxt= new Array(); //画像に対するコメントを格納する配列を作成
imgsrc[0]="***0.jpg"; imgtxt[0]="***0.jpgについてのコメント";
imgsrc[1]="***1.jpg"; imgtxt[1]="***1.jpgについてのコメント";
imgsrc[2]="***2.jpg"; imgtxt[2]="***2.jpgについてのコメント";
imgsrc[3]="***3.jpg"; imgtxt[3]="***3.jpgについてのコメント";
imgsrc[4]="***4.jpg"; imgtxt[4]="***4.jpgについてのコメント";
function wopen(i,pname){
wo1=window.open("","WindowOpen1", "width=800,height=700");
wo1.document.write("<html><head><title>"+pname+"</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(pname+"-"+imgtxt[i]);
wo1.document.write("<IMG src='"+imgsrc[i]+"'>");
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();
}
//-->
</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ソースを見たときに何をどう管理しているのかの見通しが若干つけやすくなる利点もあると思います。
参考まで。
-
-
- 0
- 件
-
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として使われるはずです。
-
-
- 0
- 件
-
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では動作確認ずみ）
-
-
- 0
- 件
-
No.6
- 回答日時：
「サムネイルが表示されない」についてですが、
i++;gz[i]="画像名１"; sc[i]="写真名-コメント１"; pp[i]="写真パス１";tn[i]="サムネイルパス１"
の直前あたりに
gz=new Array()
sc=new Array()
pp=new Array()
tn=new Array()
の４行を追加してください。忘れてました。ごめんなさい。
-
-
- 0
- 件
-
No.5
- 回答日時：
追加する画像の情報は、ヘッダー部分の
i++;gz[i]="画像名●●"; sc[i]="写真名-コメント●●"; pp[i]="写真パス●●";tn[i]="サムネイルパス●●"
のところに追加してください。
-
-
- 0
- 件
-
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>
-
-
- 0
- 件
-
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>も出力する、という点です。
この回答への補足
返答ありがとうございます。
すでに表自体は出来上がっているので、
<A href="javascript:void(0)" onclick="wopen1()"><IMG src="01s.jpg" border="0"></A>
を書き換えるだけで出来ると言う感じには出来ませんか?
(<A href="javascript:void(0)" onclick="wopen1("1行目を指定")">的な方法で…なので、ヘッダー部分のサムネイルに関する指定は必要ないかもしれません)
レイアウトとデザインを重視するあまり、表の中に表を入れて…という入れ子状態になっているため応用するのがちょっと難しそうです。
よろしくお願いします。
-
-
- 0
- 件
-
No.2
- 回答日時：
「サムネイルが表示されない」についてですが、
とりあえず、
document.writeln("<A href=\"javascript:void(0)\" onclick=\"wopen1("+i+")\"><IMG src=\""+tn[i]+"\">")
の「<IMG src」を「<IMG src」とか、単に「<」を削除して「IMG src」とするとかして、想定どおりのIMGタグが出力されているかどうか確認してみてください。
-
-
- 0
- 件
-
No.1
- 回答日時：
リクエストされた形式と違いますが、
ヘッダー部分のスクリプトを
<SCRIPT language="JavaScript">
<!--
i=0
i++;gz[i]="画像名１"; sc[i]="写真名-コメント１"; pp[i]="写真パス１";tn[i]="サムネイルパス１"
i++;gz[i]="画像名２"; sc[i]="写真名-コメント２"; pp[i]="写真パス２";tn[i]="サムネイルパス２"
i++;gz[i]="画像名３"; sc[i]="写真名-コメント３"; pp[i]="写真パス３";tn[i]="サムネイルパス３"
n=i
function wopen1(i){
wo1=window.open("","WindowOpen1", "width=800,height=700");
wo1.document.write("<html><head><title>"+gz[i]+"</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(sc[i]);
wo1.document.write("<IMG src=\""+pp[i]+"\">");
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();
}
//-->
</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>
とするのはどうでしょう。
この回答への補足
返答ありがとうございます。
やってみましたが、うまく動作しません。
サムネイルが表示されないのですが、なぜでしょう?
<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個目以降はどこを書き換えたらいいのでしょうか?
よろしくお願いします。
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- PHP 入力した部分を表示させたまま（保持）するにはどうすれば良いでしょうか？ 1 2023/01/25 11:14
- JavaScript 画像の表示位置 3 2022/12/23 08:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptとphpの連携で疑問
-
window.openでタイトル名の指定
-
なぜ、ジャバスクリプトが表示...
-
document.writeについて
-
外部ＪａｖａＳｃｒｉｐｔでのd...
-
JavaScriptで正規表現と置換
-
document.writeで画面が消える
-
java カレンダーの日付指定で...
-
文字列を点滅させたい
-
同じIDで定義した要素の配列を...
-
<a>タグのテキストを取得
-
JavaScriptで文字列の特定文字...
-
jspからjavascriptの変数引継ぎ
-
C#テキストボックスの文字を配...
-
Latexに関する質問です。
-
Boolean型配列中のTrueの有無を...
-
ActiveXobjectが作成できない
-
翌月を取得するGASが分かりません
-
Javascriptグローバル変数の値...
-
VBAでIEのボタンを押してメッセ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
○歳△ヶ月と×日を計算してくれる...
-
今日の月と日付の1週間後や3日...
-
文字列を点滅させたい
-
なぜ、ジャバスクリプトが表示...
-
iframe内に特定の文字列がある...
-
テキストボックスに入力された...
-
JS、document.write出力位置設定
-
自動ポップアップで画像を表示...
-
ジャバスクリプトで空白(スペー...
-
innerHTMLにて設定した情報を再...
-
document.open()の意味とは
-
document.writeで画面が消える
-
document.clear()の使い方について
-
ウェブ上にキーボードを作りた...
-
Java Scriptのメソッドについて
-
「分」単位で加算（減算）したい。
-
java カレンダーの日付指定で...
-
現在の日付から、１ヶ月前にす...
おすすめ情報
