• ベストアンサー

別フレームにJPG画像をhtmlページ無しでセンターに表示する方法

宜しく御願いします。 ページをフレームで縦切り2分割にして、左フレームの画像をクリックすると 右フレームに、画像が大きく表示されるホームページを作っていますが、 右フレームに表示される画像が左上寄りになります。 右フレームに表示される画像を、htmlページを用いて表示すれば センターに出来ることは判っているのですが、JPG画像のみの表示で センターにする方法はあるのでしょうか。 左フレームのソースは以下のような物です。 ******************************* <TABLE width="204"> <TR> <TD nowrap><A href="a.jpg" target="sub"><IMG src="as.jpg" height="100" width="75"></A></TD> <TD nowrap></TD></TR> <TR> <TD nowrap></TD> <TD nowrap><A href="s.jpg" target="sub"><IMG src="ss.jpg" height="75" width="100"></A></TD></TR> <TR> ******************************** 以下省略 ご存じの方、宜しく御願い致します。

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • crimson
  • ベストアンサー率40% (900/2202)
回答No.1

これは…ハッキリ言って無理でしょう。 一応、画像別にHTMLを作らずに済ませる裏技としては、 画像サイズを完全に統一した上で、右フレームをさら に2分割し、その左側のフレームと余白部分のサイズ を合わせる…という方法も考えられますが。

plussun
質問者

お礼

なるほど、そういう手がありましたか。 ちょっと考えてみます。 お返事有り難う御座いました。

その他の回答 (1)

  • duckling
  • ベストアンサー率47% (88/185)
回答No.2

画像などをセンタリングするために、 HTML があるのではないでしょうか?

plussun
質問者

お礼

確かにそうなのですが、何とかページを作らずにjpg画像を 別フレームにセンター表示したいのです。 私は6年前からホームページを公開していて、毎週ページを追加更新しているので、現在データーの総容量が800MBになっています。 jpg画像専用のhtmlのページを作るとすれば、1万ページ以上 つくらなければならず、大変です。 そして、サーバ経費等も考え出来るだけ無駄なページは作りたくないのです。 ですからもし、良い方法があればと質問させて頂きました。 もし、良い方法を思いつかれたら宜しく御願いいたします。 お返事有り難う御座いました。

関連するQ&A

  • 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とスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>~</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>~</body> </frameset> </html> 【menu.html】 <html><head>~</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ~ #left{ width:180px; text-align:right; vertical-align:bottom; }

    • ベストアンサー
    • HTML
  • 画像のサムネイルを縦横ともに指定した数値以内で表示したい。

    いままで画像を縦横比を維持して表示するには、縦一方の大きさを指定してたのですが これだと横長の画像を多く並べる場合デザインが大きく狂ってしまいます…。(どんどん横に広がってしまいます) googleやpixivのように縦横整えて表示させたいのですが、やり方が分かりません。どのようにすればよいのでしょうか。 イメージとしてはこんな感じです。 ・130ピクセルx130ピクセルの枠の中に縦横比を維持した画像を表示させる。 ・その枠を横に四つ並べる。 (縦長の画像は極端に縦長に表示され、横長の画像は極端に横長に表示されるということです。) 各画像の表示例は、例えばgoogle画像検索やpixivなど。 →google画像検索 http://images.google.co.jp/images?hl=ja&safe=off&q=%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E&lr=&um=1&ie=UTF-8&sa=N&tab=wi →pixiv http://www.pixiv.net/search.php?word=%E6%BC%AB%E7%94%BB&s_mode=s_tag ---いままで使ってたソース--- <table width="80%"> <tr align="center"> <td><a href="001.jpg"><img src="001.jpg" border="0" height="130"></a></td> <td><a href="002.jpg"><img src="002.jpg" border="0" height="130"></a></td> <td><a href="003.jpg"><img src="003.jpg" border="0" height="130"></a></td> <td><a href="004.jpg"><img src="004.jpg" border="0" height="130"></a></td> </tr> <table width="80%"> <tr align="center"> <td><a href="005.jpg"><img src="005.jpg" border="0" height="130"></a></td> <td><a href="006.jpg"><img src="006.jpg" border="0" height="130"></a></td> <td><a href="007.jpg"><img src="007.jpg" border="0" height="130"></a></td> <td><a href="008.jpg"><img src="008.jpg" border="0" height="130"></a></td> </tr> ---ここまで--- こんなソースを使ってました。 教えてください、よろしくお願いします。

    • ベストアンサー
    • HTML
  • 助けてください><IE上で1pxのズレ

    こんにちわ。 組んだテーブルに謎の1pxがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします>< <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>

  • table内の画像を中央寄せ、のせると拡大、方法?

    画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ~~~ HTML ~~~ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ~~~ CSS ~~~ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }

    • ベストアンサー
    • HTML
  • 別窓で画像を表示する場合に余白が…

    大量に画像を扱って居るのですが、タイトルをクリックすると、別窓でそれぞれの画像が開く様にしています。 サイズは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は仮の文字です)

  • テーブル幅を完全に指定したい

    テーブル幅の指定方法を教えてください。 以下のような記述のテーブルを何列も羅列して 表を作ろうと思っています。 alt="小A"~alt="小D" のところは 項目ごとのアイコン画像が入り、その項目に該当するものが無い場合は空白となるような表です。 実際にブラウザで表示してみると、widthの設定はしているのに、空白をつくると 若干ですが横幅が変わってしまい、表として並べたときにそのズレが目立ちます。 何がいけないのか、お知恵を拝借できませんでしょうか。 宜しくお願い致します。 以下、その表の一部である テーブルになります。 <table bordercolor="#ffffff" width="520" height="80" align="center" cellspacing="3"> <tr><td bgcolor="#ffcccc"> <table> <tr> <td width="100" bgcolor="#ffcccc" align="center" valign="middle"> <a href="★" target="_blank"><img src="■.gif" width="80" height="60" border="0" class="pict"/></a> </td> <td width="260" align="left" valign="center"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ </td> <td valign="center"> <img alt="中" src="■.gif" width="80" height="60" class="pict" /> </td> <td width="25"><a href="★" target="_blank"><img alt="小A" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小B" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小C" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小D" src="■.gif" width="25" height="60" class="pict" /></a></a></td> </tr> </table></td></tr></table>

    • ベストアンサー
    • HTML
  • ページ上部にスペースが空いてしまう・・・

    今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="~.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="~html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="~html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="~.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルで画像を並べるときに・・

    今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか? 環境は、WinMEでエディタにタグ打ち込んで作ってます。

    • ベストアンサー
    • HTML
  • 画像をクリックして別の画像を表示させたい

    現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 (下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。) ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で5枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか? 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。