• ベストアンサー

別窓で画像を表示する場合に余白が…

大量に画像を扱って居るのですが、タイトルをクリックすると、別窓でそれぞれの画像が開く様にしています。 サイズは2種類、800*600と1024*768のがあります。 それを↓下のようなscriptで行っていますが、どちらのサイズの窓(画像)も、画像の左と上に余白が少し出て、右と下が切れてしまいます。何処が間違っているのでしょうか? どうすれば、窓のぎりぎり一杯に画像を表示する事ができるでしょうか? どうか、教えて下さい。 ↓ <table width="80%"> <tr> <td> <a href="#" onClick="window.open('../xxx/yyy.jpg','','width=1024,height=768')">グラデーション<font size="1">1024x768</font></a> </td> </tr> <tr> <td> <a href="#" onClick="window.open('../xxx/zzz.jpg','','width=800,height=600')">グラデーション<font size="1">800x600</font></a> </td> </tr> </table> (xxx.yyy.zzzは仮の文字です)

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

  • ベストアンサー
  • arukamun
  • ベストアンサー率35% (842/2394)
回答No.2

関数を作った方が良いかもしれませんね。 <HTML> <BODY> <SCRIPT LANGUAGE=JavaScript> <!-- function popup_img(url,size) { a = window.open("","",size); a.document.write("<HTML>"); a.document.write("<TITLE>",url,"</TITLE>"); a.document.write("<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0>"); a.document.write("<IMG SRC=",url,">"); a.document.write("</BODY></HTML>"); a.document.close(); return false ; } // --> </SCRIPT> <table width="80%"> <tr> <td> <a href="#" onClick="popup_img('../xxx/yyy.jpg','width=1024,height=768')">グラデーション<font size="1">1024x768</font></a> </td> </tr> <tr> <td> <a href="#" onClick="popup_img('../xxx/zzz.jpg','width=800,height=600')">グラデーション<font size="1">800x600</font></a> </td> </tr> </table> </BODY> </HTML>

mosomoso8
質問者

お礼

折角教えて頂いたのに、遅くなってしまい、申し訳ありません。 やはり、関数を用いた方が良いみたいですね。 これからは労力を惜しまず、やってみます。 ご丁寧なお答え、ありがとうございました。

その他の回答 (1)

  • peron
  • ベストアンサー率45% (43/95)
回答No.1

画像を余白なしに表示するのは まず、スタイルシートを使うと <table width="80%"> <tr> <td> <a href="#" onClick="window.open('../xxx/○1.htlm','','width=1024,height=768')">グラデーション<font size="1">1024x768</font></a> </td> </tr> <tr> <td> <a href="#" onClick="window.open('../xxx/○2.html','','width=800,height=600')">グラデーション<font size="1">800x600</font></a> </td> </tr> </table> ○1.html <HEAD> <STYLE type="text/css"> <!-- IMG {position: absolute; top: 0px; left :0px} --> </STYLE> </HEAD> <BODY> <IMG src="yyy.jpg"> </BODY> ○2.htmlも同じように この方法だとNN4は対応していません(余白が出来ます) そこで力ワザ・・背景にしてしまう ○1.html <HEAD> </HEAD> <BODY background="yyy.jpg"> </BODY> ただし、この方法はW3C HTML4.01勧告書では推奨しないとなっております ※ スタイルシートを使うべき(今回の場合、スタイルシートが無効の場合 何も表示されませんので・・) もっとも、レイアウトの為にテーブルを使ってらっしゃるので(これも推奨しない) どちらの方法を取るにしても単に画像を指定するのではなくファイルを作らなければなりません あと、('../xxx/○1.htlm','','width=1024,height=768')">の2つ目''と空白になってますが、それぞれのウインドウ名 例えばsub1,sub2というようにしなければ、ウインドウの大きさが反映されない場合があります もっとも こうすれば、2つ目のウインドウも開いてしまいますが・・・

mosomoso8
質問者

お礼

折角教えて頂いたのに、遅くなってしまい、申し訳ありません。 ファイルを作るという方法もあったのですね。 なぜか「画像を!」と思い込んでいました。 ご丁寧なお答え、ありがとうございました。

関連するQ&A

  • テーブルタグの余白

    テーブルタグを使ってHPのレイアウトを整えようと思っているのですが、セルの中に画像をいれるとどうしても下に余白ができてしまい困っています。対策方を教えて下さい。セルの大きさも画像の大きさにあわせています!! <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" > <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> <Tr> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> <Td WIDTH="108" HEIGHT="128"> aiueo </Td> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> </Tr> <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> </Table>

  • 表の作成

    いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick=""> <!-- ж --> </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick=""> <!-- ☆ --> </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ブラウザによってリンク集のバナー画像が表示されません。

    ↓ こちらの質問とほぼ同じです。 http://oshiete1.goo.ne.jp/qa3085778.html そして、こちらで紹介されているサイトhttp://www.aland.to/~lintrank/trylint/htmllint.htmlでチェックしても解決できなかったので、質問させていただきたいと思います。 私は、Win(IE7)、ビルダー11、フォトショ・イラレ等を使ってHPを作成しました。 既に転送済みのファイルのうち リンク集の表に貼ったバナー画像がIE6だと表示されません(直リンはしてません)。×がつくのではなく、何も表示されていません。 IE7だと全く問題ないです。他のファイルには上記の様な異常は一切ありません。 リンク集一覧は、2×2の表を作り、左にバナー画像、右に ちょっとした説明を載せています。 ブラウザによって表示が異なるのはタグが正確ではないからでしょうか。HTMLというものは、つい最近知った初心者なのでよく分かりません。 よろしくお願いします。 おそらく↓この部分が表のタグだと思います。 <TABLE border="0" width="731" height="85" summary="イラスト関連サイト様一覧"> <TBODY> <TR> <TD align="center" valign="middle" width="258"><A href="http://***.***.jp/" target="_blank"><IMG src="banner1.gif" width="200" height="40" border="0" alt="*** "></A><BR> <FONT size="-1">サイト名:<A href="http://***.***.jp/" target="_blank"> ***</A></FONT></TD> <TD valign="middle" width="463"><FONT size="-1">管理人:***様</FONT><BR> <FONT size="-1">***さんが描かれるイラストは、~。</FONT></TD> </TR> <TR> <TD align="center" width="258" height="23"><A href="http://***.***.jp/" target="_blank"><IMG src="banner2.GIF" width="200" height="40" border="0" alt="***"></A><BR> <FONT size="-1">サイト名: <A href="http://***.***.jp/" target="_blank">***</A></FONT></TD> <TD valign="middle" width="463" height="23"><FONT size="-1">管理人:***様<BR> ***さんが描かれるイラストは、~。</FONT></TD> </TR> </TBODY> </TABLE>

    • ベストアンサー
    • HTML
  • ホームページの表と画像の間の余白をなくしたい

    htmlでホームページをつくっています。 表と画像の間に謎のおおきな余白ができます。 <img src="2.jpg" width="600" height="500"> <table height="50%" border="0"> <tr> <td>あああ</td> <td>あああ</td> </tr> </table> 特になにもしていないのですが どうすれば余白をなくすことができますか? よろしくおねがいします。

  • HTMLタグでテーブル枠を曲線で記述したい

    添付画像は「オークションプレートメーカー2」のテンプレートで、少しアレンジしようと思っています。 最上部の角が丸くなっていますが、下記のどの部分にあたるのでしょうか? すみませんが教えてください。 <br><center> <table cellspacing=0 border=0 cellpadding=0 width=550> <tr> <td width=1></td> <td width=1></td> <td width=1></td> <td width=2></td> <td width=2></td> <td width=536></td> <td width=2></td> <td width=2></td> <td width=1></td> <td width=1></td> <td width=1></td> </tr> <tr> <td height=1 colspan=4></td> <td height=1 bgcolor=#FF6666></td> <td rowspan=5 bgcolor=#FF6666 align=center> <font color=#FFFFFF size=5><b> </b></font> </td> <td height=1 bgcolor=#FF6666></td> <td height=1 colspan=4></td> </tr> <tr> <td height=1 colspan=3></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=3></td> </tr> <tr> <td height=1 colspan=2></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=2></td> </tr> <tr> <td height=2></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=2></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666><br><br></td> <td colspan=5 bgcolor=#FF6666><br><br></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666></td> <td> <table width=100% cellspacing=5 border=0 cellpadding=10 bgcolor=#FFCC66> <tr> <td align=left bgcolor=#FFF0F0> <font color=#993333 size=3> </font> </td> </tr> </table> </td> <td colspan=5 bgcolor=#FF6666></td> </tr> <tr> <td height=7 colspan=11 bgcolor=#FF6666></td> </tr> <tr> <td height=2 colspan=11></td> </tr> <tr> <td height=2 colspan=11 bgcolor=#FF6666></td> </tr> </table> <br> <font color="#999999" size=1>+ + + この商品説明は</font> <a href="http://www.auclinks.com/" target="_blank"><font color="#666666" size=1>オークションプレートメーカー2</font></a> <font color="#999999" size=1>で作成しました  + + +</font><font color="#FFFFFF" size=1><br>No.113.002.002</font><br> </center>

    • ベストアンサー
    • HTML
  • 画像枠テーブルについて

    画像を使ってテーブルを作ってます。 しかし、上と右の画像が繰り返してしまいます。 ここで調べてCSSでやってみましたが余計崩れてしまいました。 右下の部分と右の部分の結合もおかしくなります。 どうしたらいいんでしょうか? http://blog-imgs-19.fc2.com/x/a/n/xandinosqu/table_temple.png 紫で囲まれた部分です。 ソースは <TABLE border="0" cellpadding="0" cellspacing="0" width="60%"> <TBODY> <TR> <TD><IMG src="左上の画像" width="15" height="15"></TD> <TD background="上の画像" width="100%"> </TD> <TD><IMG src="右上の画像" width="15" height="15"></TD> </TR> <TR> <TD height="50" background="左の画像"> </TD> <TD bgcolor="#ff577f"> <TABLE border="0" cellpadding="20" cellspacing="2" width="100%" height="100%" align="CENTER"> <TBODY> <TR> <TD>*中身*</TD> </TR> </TBODY> </TABLE> </TD> <TD background="右の画像"> </TD> </TR> <TR> <TD><IMG src="左下の画像" width="15" height="15"></TD> <TD background="下の画像"> </TD> <TD><IMG src="右下の画像" width="15" height="15"></TD> </TR> </TBODY> </TABLE> です。 ビルダーで編集してます。 横幅は60%でいいんです。 画像サイズは、左上・右上・右下・左下・右・左・上・下全て15×15です。 中途半端な説明かと思いますがご教授お願いします。 えーっと、それとなるべくなら小学生でも分かりやすい説明をお願いします。小学生じゃないですけど。

    • ベストアンサー
    • HTML
  • HTML CSS 表示画像のサイズ

    表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{   width:100 height:100 border:2 } としたのですが、うまくいきません。なぜでしょうか?

    • ベストアンサー
    • HTML
  • htmlをhtaに拡張子を変えるとページ遷移ができない

    下記のようなソースを作ってます。 画面をフレーむで右と左に分けて、左のページのリンクをクリックすると、その目的のページが画面右側に表示されるというHTMLを作りました。 そのフレームがあるファイルの拡張子を.htaに変えたところ、ページ遷移の際に「○○○のファイルをダウンロードしますか?」ということを聞いてくるようになってしまいました。 どうしたら良いでしょうか? ウィンドウズ2000 IEのバージョンは分かりませんが、新しくはないです。Windows2000に付属されているモノかもしれません。 <html> <head> <title>接続リンク</title> </head> <frameset cols="20%,*"> <hta:application navigable="yes" > <frame src="aaa_link.html" name="aaa"> <frame src="bbb_link.html" name="bbb"> </frameset> </html> <html> <head> <title>bbb_link.html</title> </head> <body> <table border="0" height="100"> <td height="40"> <a href=".html" target="bbb"> <font size=5></font> </a> </td> <tr> <td height="40"> <A href=# onClick="javascript:parent.bbb.document.location.href='xxx.html';"> <font size=5>xxx</font> </a> </td> <tr> <td height="40"> <a href="zzz.html" target="aaa"> <font size=5>zzz</font> </a> </td> <tr> </table> </body> </html>

  • テーブル内に画像表示するとき。

    自サイトでレイアウトにテーブルを使っています(邪道って言わないで……)。 で、サイトロゴをセル内に表示させてネスケで確認したところ、 画像が半分テーブルの外にはみ出したようになってしまいました。 ちなみにはみ出した部分は少ししか表示されず、 つまり絵がぱっつんと途中で切れてしまった状態です。 普段はIE派ですが、こちらでは問題なく表示されます。 ネスケは4.7なのですが、まさかそういうバグがあるのでしょうか。 タグ手書きでいつも何かしらミスがあるので、今回も探したのですが、 何故か何が悪いのかわかりません。 以下にソースを載せますので、一緒に考えてくださると嬉しいです。 ======================= <table bgcolor="#ffffff" width="580" height="210">  <tr>   <td width="210" height="210" rowspan="5">   <img src="×××.gif" width="210" height="210" alt="コメント">   </td>   <td width="370" height="7">   <img src="1.gif" width="1" height="1">   </td>  </tr>  <tr>   <td align="right" height="15" class="orange2">   文章文章文章文章   </td>  </tr>  <tr>   <td height="166">   文章文章文章文章   </td>  </tr>  <tr>   <td height="15" align="right">   文章文章文章文章   </td>  </tr>  <tr>   <td height="7">   <img src="1.gif" width="1" height="1">   </td>  </tr> </table> ======================= 問題の画像は4行目の「×××.gif」。 ちなみに1.gifはこれまたレイアウトの強い味方、 1ピクセル四方の透明画像になっております(笑)。 どうぞ宜しくお願いします。

  • インラインフレームについて

    限界です。どなたかお願いします! Dreamweaver使用でHP作っています。 1.width=700 height=500のテーブル内に、CSSスタイルで薄いグラデーションイメージの背景。テーブル上下に全ページ共通のボタンあり、これをベース(テンプレート?)にしたい。 2.同じ場所に文章をはめ込みたいのでiframeがよいと考えた。 3.フレームはテーブル中央(上下ボタンの間)右よりで、ボーダラインなし、文章が短い場合はスクロールもなしにしたい。 4.インラインフレームを使っても背景は変わらず表示したい。 ということができません。特にフレームが左に寄ってしまいます。 参考までにHTMLコピーしてみました。どうぞ宜しくお願いします。 <table width="680" border="1" height="400"> <tr bordercolor="#CCCCCC"> <td valign="top" width="680" height="400"> <table border="0" height="10"> <tr> <td height="15"><font color="#808080"><a href="1.htm"><font size="-1">> 1</font></a>    <a href="2.htm"><font size="-1">> 2</font></a>    <a href="3.htm"><font size="-1">> 3</font></a> </font></td>   </tr> <tr> <IFRAME SRC="文書.htm" WIDTH="550" HEIGHT="300" align="right" FRAMEBORDER="0" NAME="文書" SCROLLING="no" ></IFRAME> </tr> </table>

    • ベストアンサー
    • HTML

専門家に質問してみよう