フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > 画像ぴったりに小窓を開く  

画像ぴったりに小窓を開く

原案:平井 公大 氏 (2000/09/24 登録)

 正確に書くと画像の大きさで小窓を開いているわけではなくて、適当な大きさの小窓に画像を表示してからその画像の縦横サイズを調べ、そのサイズにあわせてウインドウをリサイズしています。 

表示サンプル

byrgald3.jpg (縦:350 横:260)

b_yhake3.jpg (縦:315 横:236)

b_ygald4.jpg (縦:200 横:150)

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>画像ぴったりに小窓を開く</title>
<script type="text/javascript">
<!--
function show(arg){
 var param = "'scrollbars=yes,resizable=yes,width=100,height=100'";
 var imgwin=window.open("","new",param);
 imgwin.document.open("text/html");
 imgwin.document.writeln("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>");
 imgwin.document.writeln("<html lang='ja'>");
 imgwin.document.writeln("<head>");
 imgwin.document.writeln("<title>"+arg+"</title>");
 imgwin.document.writeln("</head>");
 imgwin.document.write("<body style='margin:0em'");
 imgwin.document.write(" leftmargin='0' topmargin='0'");
 imgwin.document.writeln(" marginheight='0' marginwidth='0'>");
 imgwin.document.writeln("<img src='"+arg+"' alt='"+arg+"' onLoad='resizeTo(this.width,this.height )'>");
 imgwin.document.writeln("</body>");
 imgwin.document.write("</html>");
 imgwin.document.close("");
}
// -->
</script>
</head>
<body>
<div style="text-align: center;"> 
  <p><a href="byrgald3.jpg" target="_blank" 
        onClick="show('byrgald3.jpg'); return false;">byrgald3.jpg</a> 
    (縦:350 横:260)</p>
  <p><a href="b_yhake3.jpg" target="_blank" 
        onClick="show('b_yhake3.jpg'); return false;">b_yhake3.jpg</a> 
    (縦:315 横:236)</p>
  <p><a href="b_ygald4.jpg" target="_blank" 
        onClick="show('b_ygald4.jpg'); return false;">b_ygald4.jpg</a> 
    (縦:200 横:150)</p>
</div>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.