みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Javascript ポップアップウィンドウについて

初歩的なことだとは思いますが、教えてください。

ポップアップウィンドウで画像を表示するためのリンクを以下のように記述して使っていますが、
ポップアップウィンドウ内に余白が出ます。(ウインドウ枠と画像の間)
ウインドウの左上(0,0)の位置に画像を持ってくるにはどうしたらいいのでしょうか。

調べたものをいくつか試してみましたが、どれもうまくいきませんでした。
よろしくお願いします。

--------------------
■<head>内

<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>

■<body>内

<a href="img/test.gif"><img alt="" src="~.gif"
onclick="MM_openBrWindow('img/test.gif','test','scrollbars=yes,width=950,height=400')" />
</a>
-------------------------
もしくは、

■<head>内
<script type="text/javascript">
<!--
function WindowOpen_01(){
window.open('test.gif','test','scrollbars=yes,width=1150,height=350,left=0,top=0');
}

//-->
</script>

■<body>内

<a href="javascript:WindowOpen_01()"><img src="img/table_off.gif" alt="" width="320" height="55" class="mar_t_10" onmouseover="this.src='img/table_ban_on.gif'" onmouseout="this.src='img/table_off.gif'" /></a>

投稿日時 - 2009-05-02 08:41:36

QNo.4924908

困ってます

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

bodyのtopmargin等を0に指定してやらないといけないみたいですね。

function WindowOpen_01(){
var newdoc=window.open('','','scrollbars=yes');
newdoc.document.open();
newdoc.document.write('<html>');
newdoc.document.write('<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>');
newdoc.document.write('<img src="test.gif">');
newdoc.document.write('</body>');
newdoc.document.write('</html>');
newdoc.document.close();
}

http://www.htmlcodetutorial.com/document/_BODY_TOPMARGIN.html

投稿日時 - 2009-05-02 10:39:45

お礼

ありがとうございます。
とても分かりやすかったです。
無事、表示できました!

投稿日時 - 2009-05-18 13:48:50

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

#1に加え、スタイルシートを使うと楽です。
■<head>内
function WindowOpen_01(){
var newdoc=window.open('','','scrollbars=yes');
newdoc.document.open();
newdoc.document.write('<html>');
newdoc.document.write('<body style="margin: 0px;">'); //ここが変わった
newdoc.document.write('<img src="(ここにポップアップウィンドウに表示したい画像URLを入力)">');
newdoc.document.write('</body>');
newdoc.document.write('</html>');
newdoc.document.close();
}

■<body>内
<a href="javascript:WindowOpen_01()"><img src="(ここに元ウィンドウに表示させる画像URLを入力)" alt="(解説)" width="(横幅)" height="(縦長さ)" class="(クラス名)" onmouseover="(ここにポインタを載せたときに表示させる画像URLを入力)" onmouseout="(ここにポインタを画像から離したときに表示させる画像URLを入力)" /></a>

ちなみに画像を変えるなら・・・
■<head>内
function MM_openBrWindow(theURL,wdth,hght){
var newdoc=window.open('','','width=wdth,height=hght');
newdoc.document.open();
newdoc.document.write('<html>');
newdoc.document.write('<body style="margin: 0px;">');
newdoc.document.write('<img src="'+theURL+'">');
newdoc.document.write('</body>');
newdoc.document.write('</html>');
newdoc.document.close();
}

■<body>内
<a href="(リンク先(?))" onclick="MM_openBrWindow('(ここに新ウィンドウに表示させる画像URLを入力',(画像横幅を入力),(画像縦長さ)"><img alt="(解説)" src="(親ウィンドウに表示させる画像URLを入力)" />
</a>

です。時間が無いので動作確認はしておりません。

投稿日時 - 2009-05-04 14:00:15

お礼

スタイルシートでもOKなんですね。
たくさんの情報をありがとうございます。
とても参考になりました。

投稿日時 - 2009-05-18 13:50:49

あなたにオススメの質問