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

このQ&Aに関連する最新のQ&A

A 回答 (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
    • good
    • 0
この回答へのお礼

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

<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

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



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

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

お礼日時:2001/03/18 18:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング