• ベストアンサー

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

サムネイル画像をクリックすると、別ウインドウが開いて元サイズの画像を見せるページを作りたいんです。 サムネイルをクリックするたびに新しい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>タグだけ書いておけば良いんでしょうか?

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

  • ベストアンサー
  • MMPichu
  • ベストアンサー率66% (4/6)
回答No.2

質問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>

参考URL:
http://oshiete1.goo.ne.jp/kotaeru.php3?q=52893
InabaHitomi
質問者

お礼

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

その他の回答 (1)

  • cocky
  • ベストアンサー率57% (232/402)
回答No.1

この例で言えば、ご希望を満たすには、2行目のwindow.openの2番目の引数のところに、適当なフレーム名(例えば「preview」とか)を入れればいいはずです。 あと、リンク先のHTMLファイルはこの場合必要ないと思います。 ただwin2.document.writeで<html>と</html>も出力しないと、ブラウザによっては画像が全く表示されない可能性があると思いますが…。

InabaHitomi
質問者

お礼

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

関連するQ&A

  • 画像をクリックすると閉じる別ウインドウ

    こんにちは。上記タイトルのページを作りたいと思っています。 親ページには <script language="JavaScript"> <!-- // var new1,win1p; function CenterOpen (img,Xv,Yv) { if (win1p=="on") { if (new1.closed) {} else {new1.close();} } win1p = "on"; Xw=Xv+50; Yw=Yv+80; new1=window.open("", "newwin", "resizable=1,width="+Xw+",height="+Yw+""); if(navigator.appVersion.charAt(0)>=3){new1.focus()}; new1.document.clear(); new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"><title>View Window</title></head><body bgcolor=#000000><table width=100% height="+Yv+" border=0 cellpadding=0 align=center valign=center>"); new1.document.write("<tr><td align=center valign=center><img src="+img+" width="+Xv+" height="+Yv+"></td></tr></table>"); new1.document.write("<center><form><input type=button value='close' onClick='window.close()'></form></center>"); new1.document.write("</body></html>"); new1.document.close(); } //--> </script> 画像リンクには <a href="JavaScript:onClick=CenterOpen('●●.jpg',サイズ,サイズ);"> こんな感じで作ってあります。 この new1.document.write("<center><form><input type=button value='close' onClick='window.close()'></form></center>"); 画像ボタンがいらないのでここを抜いて 画像をクリックすると子ウインドウが閉じるようにしたいのですが、うまくいきません。このサイトもいろいろ見ましたがよくわかりませんでした。 どなたかご教示下さい。よろしくお願いします。

  • 新しいウィンドをリンク指定したい。

    はじめまして、 最近webに興味があっていろいろ制作しています。 javascriptで新しいウィンドを作るのはいいんだけど、リンク指定ができない。 ーー<HTML>ーー <table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="right"><iframe src="image.html" name="BG" width="100%" height="100%"></iframe></td> </tr> </table> <table border="2"> <tr> <td align="center"><a href="JavaScript:win_open('000');" target="BG"> <img src="../image/000.jpg"a></td> </tr> </table> ーー<JavaScript>ーー <!-- function win_open(preview) { new_win=window.open("","preview",); new_win.document.write("<HTML><HEAD><TITLE>"+preview+"</TITLE>.....); new_win.document.close(); } //--> <a href="JavaScript:win_open('000');" target="BG"> 上記の書式は使えないので困ってます。 なんとか助けていただけたいです。

  • 表示されません(>_<)!!

    以下のように作ってみたんですけど、わたしは判定結果は四角の中に表示されるようにやったつもりだったんですけど、新しいページに「痩せてます」と表示されてしまいます。どこを直せば良いでしょう? お願いします <HTML> <HEAD> <TITLE>関数のテスト</TITLE> <SCRIPT language="JavaScript"> <!-- function test() { height = document.aaa.h.value; weight = document.aaa.w.value; himan = (height-100)*0.9; if (himan <= weight) { document.write("痩せてます。"); } else { document.write("太っています。"); } } //--> </SCRIPT> </HEAD> <BODY> <form name="aaa"> <table> <tr><td>身長</td><td><input name = "h"> </td></tr> <tr><td>体重</td><td><input name = "w"> </td></tr> <tr><td><input type="button" value ="判定" onClick = "test()" ></td></tr> <tr><td>判定結果</td><td><input name = "hi"> </td></tr> </table> </form> </BODY> </HTML>

  • (超初心者)ウインドウサイズを小さくするには。

    今、HPB9.0にて、以下のページに対し、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="0"> <TBODY> <TR> <TD height="0" align="center" width="248"><FONT color="#ff0000">パスワードが誤っています。<BR> 再度入力して下さい。</FONT></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 以下のような記述で、サイズを指定したいのですが、 <script type="text/javascript"> <!-- window.resizeTo(300, 300); // --> </script> どこに(どのように)記述をすれば良いでしょうか? ご教示下さい。

  • 親ウィンドウのボタンからサブウィンドウを閉じたいのですが・・・。

    いつもお世話になっています。 JavaScript初心者です。 window.closeについて質問させて下さい。 メインウィンドウにある「next」という次のページに移るボタンをクリックすると、開かれているサブウィンドウを閉じる処理を実行したいのですが、window.closeを使えばいいということしか分からず、何をどこに書けば良いのか困っています。(サブウィンドウにも「閉じる」ボタンを作成していますが、親ウィンドウからも操作が出来るようにしたいと思っています。) どうか教えていただけませんでしょうか。 ソースは次の通りです。 ----------------------------- //サブウィンドウの表示 <script language="JavaScript"> function sub(msg){ var page =window.open("", "HintPage","screenX=400,screenY=600,left=400,top=600,width=400,height=250,scrollbars=yes,resizable=yes"); page.document.open(); page.document.writeln("<html>"); page.document.writeln("<head><title>{test}</title></head>"); page.document.writeln("<body leftmargin=\"15\" rightmargin=\"15\" topmargin=\"20\">"); page.document.writeln("<h3>[ {test} ]</h3><hr><br>" + msg + "<br><br><hr><br>"); page.document.writeln("<div align=center>"); page.document.writeln("<input type=button value=close onclick=\"javascript:window.close()\"></div>"); page.document.writeln("</body>"); page.document.writeln("</html>\n"); page.document.close(); page.focus(); } </script> </HEAD> //「next」ボタンの表示 <body> <table cellpadding=3 cellspacing=5 align="right"> <tr> <td bgcolor="#9999ff" align="right"><input type="submit" name="next" value="{nextBtn}" style="width: 140px; height: 20.5px;" onClick="setPname('{next}')" {disabled2}></td></tr> </table> </body> ---------------------------- どうぞよろしくお願い致します。 説明不足の点がありましたら補足させて頂きます。

  • javascriptを使い、サムネイル表示

    サンプルHP⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>

  • ScriptがTABLEタグの中に表示されません。

    下記の様にScriptを使ってTABLEタグの中に表示させようと思ったのですが、test2.jsの「あれ?」がTABLEタグ欄に表示されません。 何方かご教授してもらえませんか? ↓↓↓↓<HTML File>↓↓↓↓ <HTML><BODY> <script src="./test1.js"></script> </BODY></HTML> ↓↓↓↓<test1.js File>↓↓↓↓ document.open(); document.write("<TABLE border=1><TBODY><TR><TD>1</TD><TD>おや?<script src=\"./test2.js\"></script></TD></TR><TR><TD>1</TD><TD>1</TD></TR></TBODY></TABLE>"); document.close(); ↓↓↓↓<test2.js File>↓↓↓↓ document.open(); document.write("あれ?"); document.close();

  • TABLE内のTABLEのHEIGHT属性が利かない

    TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか?しょうがないのでしょうか? それともCSSで解決できるものでしょうか? ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • 外部参照で画像出したいのだが・・。

    タイトルの通りですが、外部ファイルを参照して画像(テーブル等も)表示したいのですがうまくいきません。 <html lang="ja"> <head> </head> <body> <script type="text/javascript" src="js/1_1.js"> </script> </body> </html> そしてこちらが、”js/1_1.js”ファイルです。 document.write("<TABLE BORDER>"); document.write("<TR>"); document.write("<TD><img src="bbs_on.gif"></TD>"); document.write("</TR>"); document.write("</TABLE>"); 画像でなく文字ならばうまくいくのですが、結果は何も表示されません。何がおかしいんでしょうか??※パスはまちがいがありません。

  • 入れ子にしたテーブルをheight100%にする

    お世話になります。 以下のソースで、table2の高さを100%にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか?? ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML