-PR-
解決済み

Microsoftのクリップギャラリーのように元サイズのプレビューを新しいウインドウに表示したい

  • 困ってます
  • 質問No.53106
  • 閲覧数69
  • ありがとう数6
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 29% (9/31)

サムネイル画像をクリックすると、別ウインドウが開いて元サイズの画像を見せるページを作りたいんです。
サムネイルをクリックするたびに新しいwindowが次々に立ち上がるタイプのものは作れたのですが、別のサムネイルをクリックするとプレビュー用ウインドウの内容が変わるタイプのものが欲しいので困ってます。

サンプルを改造してみたのがこれです。

function tile(imgname){
win2=window.open("","","width=350,height=200,resizable=yes")
if (win2){
win2.focus()
win2.document.open()
win2.document.write("<head><title>"+bgname+"</title></head>")
win2.document.write("<body><img src="+'"'+imgname+'"'+">")
win2.document.write("<TABLE WIDTH='100%' HEIGHT='100%'><TR><TD VALIGN='bottom' ALIGN='center'><FORM><INPUT TYPE='button' NAME='ok' VALUE='Close' onClick='window.close()'></FORM></TD></TR></TABLE>")
win2.document.write("</body>")
win2.document.close()
}

あと、サムネイル画像につけるリンク先HTMLファイルの書き方も良くわかりません。
スクリプトのほうに<head>と<body>タグがあるので<html>タグだけ書いておけば良いんでしょうか?
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.2
レベル6

ベストアンサー率 66% (4/6)

質問52893の回答ソースをチョットいじりました。
これも簡単なように正確なHTML記述でないので、変更・追加してください。
(特にwriteの引数はHTML、BODYタグなど省略しています)
質問中にdocument.wirteを使っていたのでそうしましたが、できれば使わずにwindow.openで雛型HTMLを呼び、img.srcを変更する方がすっきりすると思います。

<html><head>
<title>def</title>
<script language="JavaScript">
<!--
var winObj;
var imgObj;
function imageOpen(obj,w,h) {
var bound = 20;
var winInf = "toolbar=no,width=" + (w+bound) + ",height=" + (h+bound)
+ ",status=no,scroolbars=yes,resize=yes,menubar=no";
var imgTag = "<img name=img height=" + h + " width=" + w + " border=0>";
if (!winObj || winObj.closed) {
winObj = window.open(null,null,winInf);
imgObj = winObj.document.img;
if (!imgObj) {
winObj.document.write(imgTag);
imgObj = winObj.document.img;
}
}
imgObj.src = obj.src;
winObj.focus();
}
//-->
</script></head>
<body>
<img height="64" width="64" src="abc.jpg" border="0" onClick=imageOpen(this,300,300)>
<img height="64" width="64" src="def.jpg" border="0" onClick=imageOpen(this,300,300)>
</body></html>
お礼コメント
InabaHitomi

お礼率 29% (9/31)

確かにスクリプトを複雑にしすぎてわかりづらいですね。
お答えを参考に以下のような感じでやったら成功しました。ありがとうございます。

<SCRIPT Language="JavaScript">
<!--
function previewSubWin(imgname)
{
subWin = window.open("","preview","left=10,top=20,width=320,height=300");
subWin.document.open ();
subWin.document.write("<HTML>");
subWin.document.write("<IMG SRC="+'"'+imgname+'"'+"></P>");
subWin.document.write("</BODY></HTML>");
subWin.document.close();
}
-->
</SCRIPT>
--中略---
<body>
<p><img border="0" src="aid.gif" width="81" height="81" onClick="previewSubWin('b_aida.jpg');return false">
<img border="0" src="alic.gif" width="81" height="81" onClick="previewSubWin('b_alice.jpg');return false"></p>
</body>
投稿日時 - 2001-03-18 18:30:56
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル12

ベストアンサー率 57% (232/402)

この例で言えば、ご希望を満たすには、2行目のwindow.openの2番目の引数のところに、適当なフレーム名(例えば「preview」とか)を入れればいいはずです。

あと、リンク先のHTMLファイルはこの場合必要ないと思います。
ただwin2.document.writeで<html>と</html>も出力しないと、ブラウザによっては画像が全く表示されない可能性があると思いますが…。
お礼コメント
InabaHitomi

お礼率 29% (9/31)

確かにリンク先のHTMLファイルは無くても大丈夫でした。
初心者なのでこういうつまらないことで悩むんですが、参考書にはこんなことは載っていないので助かりました。
投稿日時 - 2001-03-18 18:33:00


このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


専門家があなたの悩みに回答!

-PR-

ピックアップ

-PR-
ページ先頭へ