サムネイル画像をクリックすると、別ウインドウが開いて元サイズの画像を見せるページを作りたいんです。
サムネイルをクリックするたびに新しい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と関連する良く見られている質問

Qとどっちに入れる?どっちも入れる??

よくJavaScriptで、<head></head>の間に書きこむのと、<body></body>の間に書くのがありますが、どう違うのでしょうか。<head></head>に書くだけのが大半で、たまに両方書くのがあるのですが、毎回疑問に思ってました。お願いです。教えてくださいまし。

Aベストアンサー

どのような場合に…というのがはっきりしないのであいまいな回答になっちゃいますが、どっちの場合もあります。

functionだとheadの中に書いてますが、動的に文書の内容を書き出したりするような、最終的な命令部分はbodyの中に書いてますね。headの中で定義した関数をbodyの中で呼び出したりしますから。

Q<td>の中を移動する、外部JavaScript書き出しのdocument.write

質問タイトルの内容が可能なことなのかどうかもわかりません…(TT)
何卒よろしく切にお願い申し上げます…

やりたいことは、2列テーブルの左部分の範囲を
上下に移動する読み込みmenu.jsです。

現在、営業ツールサイトを制作しています。メニュー部分の
更新が頻繁なのですが、なんとなくフレームを使いたくなかったので、
メニュー部分を外部JavaScript(menu.js)のdocument.write書き出し(?)で
読み込むことにしました。

発注者の希望でalign="center"で真ん中寄せしたレイアウトで
テーブル2列の右に営業ツール一覧テーブル、左にmenu.jsを
呼び出しているのですが営業ツール一覧がかなりロングなことに
なってしまいました。そこで、フローターメニュー(?)の様に
スクロールにくっついてくると素敵だ!と思いました。

しかし検索すればするほど、出てくるのは低位置に留まるタイプの
フローターがメイン…。つまりフローターの位置はXYであらかじめ
決まっている感じが…。(というかソースを見て私が理解できたのが
そうゆうタイプのものでした…動きがフェードイン・アウトする
感じのものは理解不可能…)

このまま記述すると、align="center"のテーブルはウィンドウリサイズで
さっさ移動する、駄菓子菓子フロータメニューは頑なにXY値に留まるから
おかしなことになる。

嗚呼、すみません…なんだか混乱してきてしまいました。。。。。。

やりたいことは、align="center"のテーブルに2列の左部分の範囲を
上下に移動する読み込みmenu.jsです!!

不勉強、もしくは検索能力不足ですみません!!!

何卒、何卒宜しくお願い申し上げますっ!!!

質問タイトルの内容が可能なことなのかどうかもわかりません…(TT)
何卒よろしく切にお願い申し上げます…

やりたいことは、2列テーブルの左部分の範囲を
上下に移動する読み込みmenu.jsです。

現在、営業ツールサイトを制作しています。メニュー部分の
更新が頻繁なのですが、なんとなくフレームを使いたくなかったので、
メニュー部分を外部JavaScript(menu.js)のdocument.write書き出し(?)で
読み込むことにしました。

発注者の希望でalign="center"で真ん中寄せしたレイアウトで
テーブル2...続きを読む

Aベストアンサー

テーブル自体をスクロールしないで、メニュー、ツールのみをスクロールするように変更してみました。
No5の書き込みで書いたやつです。(ヘッダーとフッターはoverflowの指定はしていませんが・・・)

ロード時にスクロールバーが必要かどうか判定を行っています。
短いバージョンのメニューと長いバージョンのメニューで試してみてください。

以下ソースです。
<HTML>
<head>
<script type="text/javascript">
//↓メニューおよび営業ツールのスクロールを表示するかどうか
function ViewScroll() {
  MenuWidth = document.getElementById("menu").offsetWidth;
  MenuHeight = document.getElementById("menu").offsetHeight;
  MenuDivWidth = parseInt(document.getElementById("menuDIV").style.width);
  MenuDivHeight = parseInt(document.getElementById("menuDIV").style.height);
  ToolWidth = document.getElementById("tool").offsetWidth;
  ToolHeight = document.getElementById("tool").offsetHeight;
  ToolDivWidth = parseInt(document.getElementById("toolDIV").style.width);
  ToolDivHeight = parseInt(document.getElementById("toolDIV").style.height);
  
  //初期化(スクロールを隠す)
  if (document.all) {
    //IE
    document.getElementById("menuDIV").style.overflowX = "hidden";
    document.getElementById("menuDIV").style.overflowY = "hidden";
    document.getElementById("toolDIV").style.overflowX = "hidden";
    document.getElementById("toolDIV").style.overflowY = "hidden";
  } else {
    //IE以外
    document.getElementById("menuDIV").style.overflow = "hidden";
    document.getElementById("toolDIV").style.overflow = "hidden";
  }
  
  if (MenuWidth > MenuDivWidth) {
    //メニューの幅が、メニューDIVの幅を超えたとき(スクロールを出す)
    if (document.all) {
      //IE
      document.getElementById("menuDIV").style.overflowX = "scroll";
    } else {
      //IE以外
      document.getElementById("menuDIV").style.overflow = "scroll";
    }
  }
  
  if (MenuHeight > MenuDivHeight) {
    //メニューの高さが、メニューDIVの高さを超えたとき(スクロールを出す)
    if (document.all) {
      //IE
      document.getElementById("menuDIV").style.overflowY = "scroll";
    } else {
      //IE以外
      document.getElementById("menuDIV").style.overflow = "scroll";
    }
  }
  
  if (ToolWidth > ToolDivWidth) {
    //ツールの幅が、ツールDIVの幅を超えたとき(スクロールを出す)
    if (document.all) {
      //IE
      document.getElementById("toolDIV").style.overflowX = "scroll";
    } else {
      //IE以外
      document.getElementById("toolDIV").style.overflow = "scroll";
    }
  }
  
  if (ToolHeight > ToolDivHeight) {
    //ツールの高さが、ツールDIVの高さを超えたとき(スクロールを出す)
    if (document.all) {
      //IE
      document.getElementById("toolDIV").style.overflowY = "scroll";
    } else {
      //IE以外
      document.getElementById("toolDIV").style.overflow = "scroll";
    }
  }
}

</script>
</head>
<!--ロード時にスクロールバーを表示するかどうかを決定-->
<body onLoad="ViewScroll()">

<table width="750" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#909090">
<tr>
<td colspan="3" align="center" valign="top" bgcolor="00ff00">
    ヘッダーをJavascriptで呼んできてます。
</td>
</tr>
<tr>
<!--テーブルに高さをつけました。サイズは適当に変えてください-->
<td align="left" valign="top" width="230" height="500">
<!--DIVに高さと幅ををつけました。サイズは適当に変えてください(メニューテーブルと同じサイズにしてください)-->
<div id="menuDIV" style="top:0px; left:0px; width: 230px; height: 500px; position:relative; background-color: #ff0000; overflow: scroll;">
<!--スクロールバーを表示するかどうか判定するためにもうひとつDIVをはさみました-->
<div id="menu">
メニューをJavascriptで呼んできてます。
どっこい多分ここで呼ぶmenu.jsのテーブルが長いのか、
スクロールするとなぜか底なし沼になります…
</div>
</div>
</td>
<td width="10"></td>
<!--テーブルに高さをつけました。サイズは適当に変えてください。-->
<td align="left" valign="top" width="505" height="500">
<!--DIVに高さと幅ををつけました。サイズは適当に変えてください(ツールテーブルと同じサイズにしてください)-->
<div id="toolDIV" style="top:0px; left:0px; width: 505px; height: 500px; position:relative; background-color: #ffff00; overflow: scroll;">
<!--スクロールバーを表示するかどうか判定するためにもうひとつDIVをはさみました-->
<div id="tool">
<!--↓のDIVは営業ツールの高さ10000ピクセルにするために名義的に入れているもので、削除してください-->
<div style="height: 10000px">ここにローングな営業ツールが入ってます。</div>
<!--↑のDIVは営業ツールの高さ10000ピクセルにするために名義的に入れているもので、削除してください-->
</div>
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" bgcolor="#0000ff">
    フッターをJavascriptで呼んできてます。
</td>
</tr>
</table>
</body>
</HTML>

テーブル自体をスクロールしないで、メニュー、ツールのみをスクロールするように変更してみました。
No5の書き込みで書いたやつです。(ヘッダーとフッターはoverflowの指定はしていませんが・・・)

ロード時にスクロールバーが必要かどうか判定を行っています。
短いバージョンのメニューと長いバージョンのメニューで試してみてください。

以下ソースです。
<HTML>
<head>
<script type="text/javascript">
//↓メニューおよび営業ツールのスクロールを表示するかどうか
function ViewScroll() {
...続きを読む

Q

数十の<a>タグがあるHTMLファイルの中で、
<div id="blank">で囲まれた<a>タグ群のみをすべてtarget="_blank"にしたいと考えています。
該当する<a>タグすべてにtarget="_blank"を書くと、HTMLファイルの容量が大きくなるので、CSSのIDとJavaScriptを組み合わせて、実現できないものでしょうか。

Aベストアンサー

<base target="_blank">
<div id="blank">
 <!-- -->
</div>
<base target="_self">

Q

▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか?

<div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。

また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか?

何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。

Aベストアンサー

>なぜか時々エラーが出ます。
ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

以下は、予防的な意味での注意点についてちょっと書きます。
>return false;

は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として使わない方が良いです。
つまり、
id="soldout"の時に
var soldout;という風にはしない方が良いです。
同じでなければ、cartFormでもなんでもかまいません。
あと、scriptは、
<!--
(スクリプトの中身)
//-->
のように
<!--
//-->
で囲むようにします。

getElementById
は、ブラウザやのブラウザのバージョンによっては使えないことがあります。
その場合は、使えるかどうかを調べる必要があります。

<script type="text/javascript">
<!--
function stockStatus (num){
var f=document.getElementById("soldout");

if(f!=null){
for (var i =0; i<=f.length -1 ;i++){
f.elements[i].disabled=num;
}
}
}
//-->
</script>

>なぜか時々エラーが出ます。
ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

以下は、予防的な意味での注意点についてちょっと書きます。
>return false;

は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として...続きを読む


人気Q&Aランキング

おすすめ情報