- 締切済み
画像の小窓表示について
サムネイルの画像をクリックすると画像の小窓が表示されるようにしたのですが縦長の画像と横長の画像が有るため縦長の画像の右側に余白が出てしまい見栄えが良くありません。画像の周りの白い淵をなくしたいのですが下記のタグをどのように修正すれば良いのでしょうか。 ご指導の程よろしくお願いします。早々 <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbJumpURLinNewWindow(url) { if (url != '') { window.open(url, '_blank','width=500,height=400,left=600,top=50,screenX=600,screenY50,scrollbars=yes'); } } //--> </SCRIPT></HEAD>
- Arisu0308
- お礼率28% (2/7)
- ホームページ作成ソフト
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ブラウザにはデフォルトでmarginが設定されています 画像のアドレスを直接呼び出してやるとそのmarginを消すことができないので (margin-top) (margin-left)(画像）(margin-right) (margin-bottom) という状況で表示されます このmargin部分が周りの白い縁となって出るわけです [右側の白い部分] これは作画比率とかの問題でなると思います [元画像サイズ] 714*536 [画面サイズ] 536*402 画面のサイズは536*402ですが実際にはmrgin分引かれたものが作画区域になります 例えばdefault marginが10pxずつあったとすると 作画区域は 516*382 となります この区域に画像を縮小して作画するので 横 → 714→516 0.723倍 縦 → 536→382 0.713倍 となって縦の倍率の方が小さいので横もその倍率(0.713倍)に準じて714*0.713=509となります 『横方向』(画面サイズ536) (margin:10px)(画像:509px)(余白:516-509=7px)(margin:10px)=536px 『縦方向』(画面サイズ402) (margin:10px)(画像:386px)(margin:10px)=402px という風になります この余白部分のことを言っているのかな？と思います Norton Internet Securityを入れているとIEではNorton tool barが出るので作画区域はもっと小さくなって画像は464*348で作画されるので右側の余白はより多くなります ※あくまでも例ですのでブラウザごとにmarginや作画方法が違うので少し異なります 前回の上のサンプル(document.write)の方でそのmarginの除去と画面サイズと画像サイズが異なったときに100％表示するようにしていたのですがそちらでもできませんでした？ まぁ、こちらでも余白(2px程度）が(除去できないので)右と下に出てしまいますけど・・・
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 前回はサイズ調整のみに焦点を当てたので細部については何も書きませんでしたが・・・ おそらく画像のアドレスを直接呼び出していると思うのですがそれだとあまりよくないのでdocument.write()によってＨＴＭＬ表示してください <script type="text/javascript"><!-- function window(url,Width,Height) { if (url != '') { var win; win = window.open(url,"_blank","width="+Width+",height="+Height+",left=600,top=50"); win.document.open(); win.document.write("<html><head><title>IMAGE<"+"/title>"); win.document.write("<"+"/head>"); win.document.write("<body style='margin:0px;'><div>"); win.document.write("<img src="+ url +" alt='sample' style='width:100%;height:100%'>"); win.document.write("<"+"/div>"); win.document.write("<"+"/body>"); win.document.write("<"+"/html>"); win.document.close(); } } //--></script> <img src="sample1.gif" onclick="window('sample1.gif','500','400')"> ※小窓に表示させる画像を500＊400で作られているのならstyle='width:100%;height:100%;'はおそらくいらないと思います ＞functionを別にしてやる 中身は大分省略しますが <script type="text/javascript"><!-- function win1(url) { window.open("・・・,width='500',height='400',・・・"); } function win2(url) { window.open("・・・.width='400',height='500',・・・"); } //--></script> <img src="" onclick="win1('')"> 横長の画像ならfunction win1()で小窓表示 <img src="" onclick="win2('')"> 縦長の画像ならfunction win2()で小窓表示 という意味です
- leap_day
- ベストアンサー率60% (338/561)
こんにちは _HpbJumpURLinNewWindow()の発生元で多分onclickだと思いますが onclick="_HpbJumpURLinNewWindow('アドレス','幅','高さ')" のようにして function _HpbJumpURLinNewWindow(url,Width,Height) { ・・・ window.open(url,'_blank','width='+Width+',height='+Height+',left=600,・・・ のようにしてみては？ もしくはその小窓サイズが縦長の画像ならこのサイズ、横長ならこのサイズと言う風に決まっているのならwindow.openのfunctionを別々にしてやるとか・・・ 他にもありますが一例として・・・
補足
早速のご連絡有難うございました。 つきましては、以下のようにタグを修正したのですが小窓の右に余白が表示されて見栄えが良くありません。 誠に恐縮ですが、下記のタブの修正箇所をお教え下さいますようお願いします。 又、小窓サイズが縦長の画像なら'width=400,height=500、横長'width=500,height=400の場合window.openのfunctionを別々にしてやるタグの記述をお教え下さいますようお願いします。早々 <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_CODE_40 onclick="_HpbJumpURLinNewWindow('アドレス','幅','高さ')" function _HpbJumpURLinNewWindow(url,Width,Height) { if (url != '') { window.open(url,'_blank','width='+Width+',height='+Height+',left=600,top=50,screenX=600,screenY50,scrollbars=yes'); } } //--> </SCRIPT>
お礼
早速のご連絡有難うございました。 ご指示頂きましたようにタグを入力しなおしましたが白い部分が表示されてしまい修正できませんでした。 つきましては、下記URLをご参照下さいますようお願いします。 定期健診の医院風景の下の写真をクリックすると縦長の写真の右側の白い部分をなくしたいのと周りの白い淵をなくしたいのですが・・・ 誠に恐縮ですが、タグを修正してご連絡頂けましたら幸いです。 ご連絡をお待ちしております。早々 http://www.geocities.jp/swjfb394/index.htm