同ページ内リンクでの画像表示について

このQ&Aのポイント
  • 同じページ内に作成したテーブルのメニュー欄からクリックして表示欄のテーブルに画像を表示する方法がうまくいきません。どこが間違っているのでしょうか?お教えください。
  • 同一ページ内での画像表示に関して、メニュー欄のテーブルからクリックして表示欄のテーブルに画像を表示する方法が上手くいきません。問題点を教えていただけませんか?
  • 同じページ内でテーブルを使用してメニュー欄からクリックした画像を表示させる方法について質問です。問題点を教えていただけますか?
回答を見る
  • ベストアンサー

同ページ内リンクでの画像表示について

同じページ内にテーブルを一個ずつ作ります。 1つはメニュー欄、もう1つは表示欄。 メニュー欄のテーブルからクリックして 表示欄のテーブルに画像を表示したいのですがうまくいきません。 <TABLE border="1"> <TR><TD> <A href="http://www.geocities.jp/deepv8/gazou/G_AW.gif#hyoji2">表示</A> </TD></TR> </TABLE> <br> <TABLE border="1" width="300" height="300"> <TR><TD> <A name="hyoji2" href=""></A> </TD></TR> </TABLE> どこが間違っているのでしょうか? ご教示の程宜しくお願いします・・・m(_ _)m

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

  • ベストアンサー
  • vista2446
  • ベストアンサー率46% (131/279)
回答No.1

>どこが間違っているのでしょうか? 表示方法を間違っています。同一ページ内に、別のページ読み込ませるには、インラインフレームが簡単な方法です。 <TABLE border="1"> <TR><TD> <A href="http://www.geocities.jp/deepv8/gazou/G_AW.gif" target="hyoji2">表示</A> </TD></TR> </TABLE> <br> <TABLE border="1" width="300" height="300"> <TR><TD> <iframe name="hyoji2" width="300" height="300" frameborder="0"></iframe> </TD></TR> </TABLE> こんな感じでいかが?

good148
質問者

お礼

回答有り難うございます。 こういう場合には、別のページになるのですね・・・(^^ゞ インラインフレームもチョット考えたのですが、 インラインフレームの本来の姿が <iframe src="...">~</iframe> ですので、<iframe name="..." ></iframe>は、気が付きませんでした。 助かりました。忘れないように「小技」フォルダにしまっておきます・・・(^^)

関連するQ&A

  • ページ上部にスペースが空いてしまう・・・

    今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <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
  • リンク先から戻ったら、表示がおかしい。

    未完成品です。 サイトの各ページからメインページに戻ると、文字の色が変わったり、 大きさが変わります。 どこに不具合があるか、初心者なのでよくわかりません。 いじりすぎて、構成もめちゃくちゃだと思いますが、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ゲームのすべて</title> </head> <!--全体の背景--> <body bgcolor="#696969" text="#FFFFFF" link="#0000FF" alink="#DC143C" vlink="#8B008B"> <title>デザイン</title> <style type="text/css"> <!-- body { line-height:150%; font-size: 12px; color: #222222; margin:10px 0px; } .menu_c { font-size:12px; color:#cccccc; } .menu_c a { color:#ffffff; text-decoration: none; } .menu td { padding:2px 8px; } .side { background:#D3D3D3; margin:0px 0px 10px 0px; padding:5px 8px; border-left: #80838F 1px solid; border-right: #80838F 1px solid; border-bottom: #80838F 1px solid; } h3 { color:#ffffff; font-size:12px; margin:0px; padding:2px 12px; background:#808080; } h4 { color:#ffffff; font-size:12px; margin:0px 0px 0px 8px; padding:2px 12px; background:#808080; } .comb { margin:0px 1px 10px 8px; padding:5px 10px 5px 4px; background:#D3D3D3; } --> </style> </head> <!-- ページの全体幅テーブルタグ --> <table width="780" align="center"> <tr><td> <!--一番上のところ--> <table width="100%" > <tr> <td width="18%"><img src="logo.gif" width="132" height="40"></td> <td width="82%" align="right"><a href="index">ホーム</a> <hr noshade size=1></td></tr> </table> <br> <table width="100%" border="0" cellspacing="0" bgcolor="#DCDCDC" class="menu"> <tr><td width="72%">ああああああああああああああ</td> <td width="28%" align="right">デザイン</td></tr> </table> <table width="100%" border="0" cellspacing="0" class="menu"> <tr><td bgcolor="#808080" class="menu_c"><a href="#">ホーム</a> | <a href="#">おもなゲーム</a> | <a href="#">ソフト</a> | <a href="#">作られる過程</a> </td></tr> <tr><td><a href="#">ホーム</a> &gt; ページナビ</td></tr></table> <!--左サイドメニュー--> <table width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-bottom: #B6B6B6 1px solid;"> <tr><td width="25%" height="70" valign="top" bgcolor="#696969"> <h3>おもなゲーム</h3> <div class="side"> ・<a href="page1.html#1">PS3</a><br> ・<a href="page1.html#2">PSP</a><br> ・<a href="page1.html#3">PSP go</a><br> ・<a href="page1.html#4">Xbox360</a><br> ・<a href="page1.html#5">Wii</a><br> </div> <h3>ソフト</h3> <div class="side"> <br> </div> <h3>おもなゲーム</h3> <div class="side"> ・<br> ・<br> ・<br> ・<br> </div> <h3>プログラマー</h3> <div class="side"> </div> <!--左サイドメニュー 終--> <!--右サイドメニュー 始--> <br></td> <td width="75%" valign="top"> <h4>自己紹介</h4> <div class=comb>ああああああああああああああああああああああああああああああああ<br> aaaaaaaa<br> aaaa </div> </td></tr></table> </td></tr></table> <table width="100%" > <tr><td align="center"><a href="index.html">ホーム</a> | <a href="page1.html">おもなゲーム</a> | <a href="page2.html">ソフト</a> | <a href="page3.html">作られる過程</a> | <a href="page4.html">プログラマー</a></td></tr> <tr><td align="center">Copyright &copy; Your site. All Rights Reserved. </td></tr> </table> </html>

  • IEのテーブル表示の不具合でしょうか・・・?

    IEで正しく表示されているものが、別のページへ行って「戻る」ボタンを押すと、テーブルの表示が崩れてしまいます。 2列のテーブルの右側の部分が左側にかぶって表示されてしまうのです。 参考までにその部分のソースを以下に記述します。 何か気になる点などお気づきになられたら教えてください。 <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="px12"> ・<a href=>あああああ</a><br> ・<a href=>いいいいい</a><br> ・<a href=>ううううう</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>えええええ</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>おおおおお</a><br> <hr width="160" size="1" noshade align="left"> </td> </tr> </table> </td> ※以下から左側のテキストにかぶって表示されてしまいます。 <td width="120"><a href=><img src="images/画像.gif" width="120" heigt="180" border="0"></a><br> <table width="120" border="0" cellspacing="2" cellpadding="0"> <tr> <td valign="top"><img src="images/矢印画像.gif" width="11" height="11" border="0"></td> <td class="px12"><a href=>テキストテキストテキスト</a></td> </tr> </table> </td> </tr> </table> 以下が私の環境です。 WindowsXP(HomeEdition)・SP2インストール済・IE6 よろしくお願いします。

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

    ↓ こちらの質問とほぼ同じです。 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
  • Dreamweaverのデザインで表示がおかしい時

    IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか? <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL>&nbsp; </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>

  • HTMLの画像のリンクについて

    ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか? 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p>    <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>

  • <td> 内のテーブルを上寄せにするには?

    すみません教えていただけますか? 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか? よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> &nbsp; </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 画像の並べ方

    こんにちは、HTMLフォーム→Postgresで検索→PHPで画像表示というページを作っています。 現在画像が縦に1枚ずつ並ぶのですが、横に4枚並べた後、次の行に表示としたいのです。 テーブルのタグをいろいろ変更してみたのですが思い通りに表示されません。 おかしいところがありましたら教えていただけないでしょうか。 <table><td width="13%">画像</td></tr> <tr> EOF; $result = @pg_Exec($sqlSelect); if ($result == false) { $file_name = __FILE__; $line_id = __LINE__; exit; } for ($i = 0; $i < @pg_Numrows($result); $i++) { $row = @pg_Fetch_Array($result,$i); if ($row['gazou'] == "") { $gazou = "&nbsp;"; } else { $cd = $row['gazouid1']; $gazou = "<a href=\"JavaScript:onClick=wopen('" . $row['gazouid1'] . "','" . $row['gazouid'] . "');\"><img src='../members/" . $row['gazouid1'] . "/img/" . $row['gazou'] . "_s.jpg' border=0 width=150 height=140 align=absmiddle></a>"; } $html .= " <td align=center>" . $gazou . "</td>\n"; $html .= " <tr><td align=center><a href='../members/" . $row['gazouid1'] . "/' target=\"_blank\">" . $row['name'] . "</a></td></tr>\n"; } $html .= <<< EOF </table>

    • ベストアンサー
    • PHP
  • テーブルの線について

    下記のようなHPをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか? ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Top</font></td> </tr> <tr> <td><a class="menu" href="">News</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Shopping</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright &copy; 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>

    • ベストアンサー
    • HTML
  • どうやったらこの画像にリンクできるでしょうか?

    現在ホームページを作成しているのですが、「ホーム」「プロフィール」「works」「ブログ」「名言」「ムービー」「メルマガ」のところにリンクが貼れません。 <a href="http://*************"> <td width="100" background="ホーム".png></a></td> 上記のようにやってもできません。 どこがどう間違っているのでしょうか? 下記に書いてあるのが、前後の部分です。 <table width="700" height="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center"> <tr> <td width="700" height="129" background="aa.png" align="center" valign="middle"> </td> </tr> <tr> <td width="700" height="30"> <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"> <tr align="center" valign="middle"> <td width="100" background="ホーム".png></td> <td width="100" background="プロフィール".png></td> <td width="100" background="works".png></td> <td width="100" background="ブログ".png></td> <td width="100" background="名言".png></td> <td width="100" background="ムービー".png></td> <td width="100" background="メルマガ".png></td> </tr> </table> </td> </tr>

    • ベストアンサー
    • HTML

専門家に質問してみよう