- 締切済み
window.openで横指定し縦は横にあわせて補正されるような仕組み
色ろ調べた結果、現在↓のような方法であるWEBページ内の画像をクリックしたらポップアップ画像が画像サイズ画面になって表示されるようにしています。 ＝＝＝＝＝＝＝＝＝＝＝ function openImageSizedWindow(src){ var i = new Image(); i.src = src; var pop_win = window.open( "", "_blank", "width=600,height=100%,scrollbars=yes,resizable=yes" ); pop_win.window.document.write( '<html>' +'<head><title>'+i.alt+'</title></head>' +'<body style="margin:0;pading:0;border:0;">' +'<img src="'+i.src+'" width="100%" alt="" />' +'</body>' +'</html>' ); } ＝＝＝＝＝＝＝＝＝＝＝ これをなんとかしてウィンドウも画像も横を600にして縦は縦横比をキープした高さになるようにしたいのです。 どなたかお分かりになられましたらお願いいたします。
- wf3255
- お礼率52% (90/172)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- is_may
- ベストアンサー率65% (58/89)
#1のものです。 document.witeする内容がおかしかったので直しました。 function openImageSizedWindow(src){ var i = new Image(); i.src = src; wh=Math.floor(i.height*(600/i.width)); var pop_win = window.open( "", "_blank", "width=600,height="+wh+",scrollbars=yes,resizable=yes" ); pop_win.window.document.write( '<html>' +'<head><title>'+i.alt+'</title></head>' +'<body style="margin:0;pading:0;border:0;">' +'<img src="'+i.src+'" width="100%" alt="" />' +'</body>' +'</html>' ); } 失礼いたしました。
- is_may
- ベストアンサー率65% (58/89)
普通にポップアップを表示する前に画像サイズを取得して計算しておけばいいと思います。 function openImageSizedWindow(src){ var i = new Image(); i.src = src; wh=Math.floor(i.height*(600/i.width)); var pop_win = window.open( "", "_blank", "width=600,height="+wh+",scrollbars=yes,resizable=yes" ); pop_win.window.document.write( '<html>' +'<head><title>'+i.alt+'</title></head>' +'<body style="margin:0;pading:0;border:0;">' +'<img src="'+i.src+'" id="lis" style="display:none;">' +'<img src="'+i.src+'" width="100%" alt="" id="main" />' +'</body>' +'</html>' ); } 画像の読み込みが行われる前に（キャッシュに入ってない時に）ウィンドウを表示してしまうとウィンドウサイズの縦幅がおかしくなります。 小さなサムネイル画像をクリックするのであれば問題なさそうですが・。
関連するQ&A
- window.openでタイトル名の指定
window.openで開くウインドウのタイトルバーに指定文字列を入れたいのですが、できますでしょうか？ ファイル(画像）を直リンクで開く為、そのパスが表示されてしまいます。 いろいろ検索して var w1 = ""; w1 = window.open(url , "hoge" , "width=640,height=180,scrollbars=yes,location=1"); w1.document.title = "test"; とかでできると書いてあったサイトもあったのですが私の場合どうもうまくいきません・・。 お願いいたします。
- ベストアンサー
- JavaScript
- ポップアップブロック付きのブラウザ（IE8)で、window.open
ポップアップブロック付きのブラウザ（IE8)で、window.openをつかって小窓を二つ出したい。 表題の通り、ポップアップブロックに引っかかってしまい、2つの小窓が出せません。 現状は、1つだけ小窓が立ち上がる状態です。 理想のタイミングは、エンターページをクリックすると、window.openが実行され 2つの小窓が立ち上がるというのが理想です。 以下に現在のスクリプトをコピペ致します。 <script language="JavaScript"> moveTo(0,0); resizeTo(screen.width,screen.height); var g_pop01; var g_pop02; function open_pop(){ var w_Width1 = 280 var w_Width2 = 567 var w_Height1 = 540 var w_Height2 = 540 var w_space = 22 var x1 = (screen.availWidth - w_Width1 - w_Width2 - w_space)/2; var x2 = x1 + w_Width1 + w_space var y1 = (screen.availHeight - w_Height1)/2; var y2 = (screen.availHeight - w_Height2)/2; g_pop01 = window.open("left2.swf?nowX="+x1+"&nowY="+y1,"flash_pop1",'toolbar=0,menubar=0,scrollbars=no,resizable=no,width='+w_Width1+',height='+w_Height1+',left='+x1+',top='+y1); g_pop02 = window.open("right2.swf?nowX="+x2+"&nowY="+y2+"&guideX="+x1+"&guideY="+y1,"flash_pop2",'toolbar=0,menubar=0,scrollbars=no,resizable=no,width='+w_Width2+',height='+w_Height2+',left='+x2+',top='+y2); } </script> </head> <body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 scroll="no" bgcolor="#000000"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <form name="frm2"> <input type="Hidden" name="fov" value="0"> </form> <tr> <td align="center" valign="middle"> <table width="484" height="260" border="0"> <tr> <td><img src="img/logo_484x260_2.png" border="0" usemap="#Map" LANGUAGE=javascript onClick="open_pop()"> <map name="Map"> <area shape="rect" coords="4,2,480,254" href="index.html"> </map></td> </tr> </table> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- アダルトのウエブサイトが出てきます.
インターネットにつなぐと自動的につながり,アダルトサイトが出てきます.何かの拍子に出ると思いますが,その解除の仕方を教えてください.そのソースはつぎのようなものです.(<html> <head> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <title>---------------------------------------------------------------------------------------------------</title> <script src="http://www.click-monkey.com/cm/**.**"></script> </head> <body oncontextmenu="return false"> <SCRIPT LANGUAGE="Javascript">var sPin = '';if (window.location.href.indexOf("?") != -1)sPin = document.location.href.substr(document.location.href.indexOf("?"));document.write('<img src="http://***.***.**.**/counter.dyn?vendor=jptk&pin='+sPin+'" width="1" height="1" border="0">');</SCRIPT> <script> var Win=window.open("","_blank","width=1000,height=650,status=yes,scrollbars=yes,directories=no,menubar=yes,resizable=no,toolbar=yes,location=yes"); Win.moveTo(-5,-30); Win.location.href="http://***.****.com/1/index2.php?id=2-1-1-6"; </script> <script> var ti_id=setTimeout("next_ac('http://***.****.com/1/index2.php?id=2-1-1-6')",10000); </script> </body> </html>) 私はどのようなものかわかりませんが・…教えていただきたく思います.
- ベストアンサー
- Windows 95・98
- サブウィンドウ関係のコードの改造（その２）
文末のコードは http://oshiete1.goo.ne.jp/qa3161625.html にてNo2ご教示いただいたものですが、 (1) 1回サブウィンドウを開くと2回目以降、うんともすんとも言わなくなってしまいます（スクリプトエラーにもなりません）。なぜでしょうか？ (2) 開いたサブウィンドウのソースをみると、 <HTML></HTML>としか書かれていませんが、タイトルは「題名1」とセットされてますし画像も表示されています。なぜでしょうか。 開いたサブウィンドウの上下左右の余白をゼロにしたいので <body style="margin: 0px;">などとしたいのですが。 以上、よろしくお願い致します。 <html> <head> <script> function openNewWin(url,winTitle){ //画像オブジェクト作成 var img = new Image(); img.src = url; //画像のロード後に窓を開く img.onload=function(){ //画像の横幅 var width = this.width; //画像の横幅でabout:blankを開く var Win=window.open("", "new", 'scrollbars=yes,top=0,left='+(getScreenWIDTH()-width)+',width='+width+',height='+(getScreenHEIGHT()+20)); //Winのdocumentにタイトルをつける Win.document.title = winTitle; Win.document.body.innerHTML = '<img src="' + this.src + '" onclick="window.close();" alt="閉じる">'; } } function getScreenHEIGHT(){ if(!!window.screen){ return screen.height-80; }else{ return null; } } function getScreenWIDTH(){ if(!!window.screen){ return screen.width-12; }else{ return null; } } // --> </script> </head> <body> <a href="#" onClick="openNewWin('myimg1.gif','題名1')">開く1</a> <a href="#" onClick="openNewWin('myimg2.gif','題名2')">開く2</a> </body> </html>
- ベストアンサー
- JavaScript
- window.openで404エラーがでます
以下のhoge.htmlでアンカーをクリックした際、クライアントがWindows環境であれば正常に動作するのですが、Mac OS X ＆ IE5.2では、404エラーになってしまいます。 勿論、test.phpは存在します。 どなたか、このような症状を経験された方はおられますでしょうか？ よろしくお願いいたします。 hoge.jp--------------------------------------- xx = ""+Math.round(screen.availWidth * .7); yy = ""+Math.round(screen.availHeight * .7); function op_win(v_form,v_target,v_user_pic_dir) { var com_str="test.php?"+v_form+"&"+v_target+"&"+v_user_pic_dir; subwin=window.open(com_str,v_target,"toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,alwaysRaised=yes,left=50,top=50,width="+xx+",height="+yy); subwin.focus(); } ---------------------------------------------- hoge.html------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <SCRIPT type="text/javascript" src="./e-shop_creator.js"></SCRIPT> </HEAD> <BODY> <A href="JavaScript:op_win('aaaaa','bbbbb','cccc')">オープン</A> </BODY> </HTML> ----------------------------------------------
- ベストアンサー
- JavaScript
- （Netscape） window.openのスクロールバー
Netscapeで、window.openしたときにスクロールバーの表示をさせたいのですが、うまく表示されません。 window.open(url,'testPage','scrollbars=yes,toolbar=yes,menubar=yes,resizable=yes'); いろいろ調べてみて問題ないと思うのですが、なぜ表示されないのでしょうか？ ちなみにNetscapeのバージョンは、7.02です。 お分かりの方がいましたら、教えてください。
- 締切済み
- JavaScript
- javascriptで別ウインドウを開いたのですが背景設置が上手くいきません。
いつもお世話になっております。 JavaScriptを使用し別ウインドウで画像を表示させているのですが、 そのウインドウの背景が上手く設定できません。 どのように編集すればよいでしょうか？ 現在の状態は以下の通りです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>aaa</title> <script language="javascript"> <!-- function OpenWindow(){ var width = document.images['00'].width + 228; var height = document.images['00'].height +254; subWin = window.open("","subWin","status=no,menubar=no,toolbar=no,scrollbars=no,resizable=yes,screenX=0,screenY=0,width=" + width + ",height=" + height + '"'); with(subWin.document) { open(); write("<html><head><title>sample1</title></head>"); write("<body onload='window.resizeTo( document.images[00].width + 40,document.images[00].height + 120)'><div align='center'><img id='00' src='b/1b.jpg'><br>"); write("<button type='button' onclick='window.close()'>閉じる</button></body></div></html>"); close(); } } --> </script></head> 宜しくお願いします。
- ベストアンサー
- JavaScript
- 外部jsファイルにwindow.openを記述するとmacIEで動かない場合
他の質問にこの条件のケースがなかったので質問させていただきます。よろしくお願いします。 親ページからサブウインドウを開こうとして、 macのＩＥだけ確認できません。 ファイルは以下のように作成しました。 wopen.jsファイルを作成して、そこに function wopen(URL){ window.open("aaa.html", "wopen", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=600,height=600"); } と記述して HTMLに <head> <SCRIPT TYPE="text/javascript" SRC="wopen.js"></SCRIPT> </head> <body> <a href="javascript:wopen( )"><img src="a.gif"></a> </body> なぜなのかわからないので、 すみませんがよろしくお願いします。
- 締切済み
- JavaScript
- 画像の別ウィンドでの拡大表示をやりたいが・・・
Ｋｏｏｔｓｕｋｉと申します。 初めて質問させていただきます。 javascriptを勉強しはじめたものです。 ブログで画像の別ウィンドでの拡大表示をやりたくjavascriptでfunctionを定義しました。しかし、エラーになってしまいうまくいきません。どなたか原因を教えていただけないでしょうか。 まずhtmlは以下です。 <img src="http://...AAAAs.jpg" onclick="largeImage(this)"> 次にfunctionの定義は以下です。 ブログ上のサムネール画像をクリックしたときには、lergeImageで900×675のウィンドゥを開き、そこにオリジナル画像を100%縮小(?)で表示します。同時に画面の左上に拡大マーク画像を表示し、そこがクリックされたら同じウィンドゥを使って縮小なしで再表示しようと思っています。しかし、拡大マーク画像をクリックすると、ランタイムエラー：行番号0で「オブジェクトを指定してください」とランタイムエラーになってしまいます。どこがおかしいのでしょうか。よろしくお願いします。 <script type="text/javascript"> <!-- var lisrc = ""; function largeImage(img){ var objImg = new Image(); objImg.src = img; var img_wh_hi = objImg.height / objImg.width; var base_wh_hi = 675 / 900; img.src.match(/^(.+)s\.([^\.]+)$/); lisrc = RegExp.$1 + "." + RegExp.$2; newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" width="100%" onClick="window.close()"alt="クリックするとウィンドゥを閉じます。"><img src="http://blog-imgs-19.fc2.com/....../kakudai.jpg" onClick="maxImage()" alt="さらに拡大" style="position:absolute; top:10px; left:150px; z-index=2"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } function maxImage(){ newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" onClick="window.close() alt="クリックするとウィンドゥを閉じます"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } // --> </script>
- ベストアンサー
- JavaScript
- ブラウザサイズをフルサイズで表示させる方法
ブラウザにタイトルバーとスクロールバーとスタートバー以外を表示しないページを作成したいのですが、 XPはOKで、WIN98でうまくいきませんでした。リンク先をクリックすると別ウィンドウが立ち上がる仕組みです。画面サイズに合わせて変わるようなのですが、WIN98では、スクロールバーが途中で切れてしまい、 一番下まで、綺麗に表示できませんでした。これ以外の方法でもかまいませんので、どなたかご伝授いただければと思います。 function wopen(url){ if(screen.width <= 640){ window.open(url,"_blank","resizable=no,menubar=no,status=yes,location=no,scrollbars=yes,toolbar=no,width=640,height=480,left=0,top=0") }elseif(screen.width <= 800){ window.open(url,"_blank","resizable=no,menubar=no,status=yes,location=no,scrollbars=yes,toolbar=no,width=800,height=600,left=0,top=0") }else if(screen.width <= 1024){ window.open(url,"_blank","resizable=no,menubar=no,status=yes,location=no,scrollbars=yes,toolbar=no,width=1024,height=768,left=0,top=0") }else if(screen.width <= 1152){ window.open(url,"_blank","resizable=no,menubar=no,status=yes,location=no,scrollbars=yes,toolbar=no,width=1152,height=864,left=0,top=0") }else if(screen.width <= 1280){ window.open(url,"_blank","resizable=no,menubar=no,status=yes,location=no,scrollbars=yes,toolbar=no,width=1280,height=1024,left=0,top=0") }else{ window.open(url,"_blank","resizable=no,menubar=no,status=yes,location=no,scrollbars=yes,toolbar=no,width=1600,height=1240,left=0,top=0") } return; } ： <A href="javascript:wopen('/index.html')">
- ベストアンサー
- JavaScript
お礼
完璧なご回答、心より感謝いたします。 ホントに助かりました。 ありがとうございました。