• ベストアンサー

インラインフレーム内のアンカーに飛ばせますか?

a.html上にname="ai"としてiflameを置き、そこにb.htmlを表示させています。 このb.htmlにはアンカーをいくつかつけており a.html上にあるリンクをクリックすると インラインフレーム内のb.htmlの任意のアンカーポイントへ移動するということをしたいのですが 可能なのでしょうか? 現在このような書き方なのですが まったく動きません…。 <a href="b.html#b-1" target="ai"><img src="image.gif" width="100" height="16"></a> 教えてください。

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

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

  • ベストアンサー
  • gura_
  • ベストアンサー率44% (749/1683)
回答No.1

 target について、勘違いされていませんか↓ http://www.tohoho-web.com/html/attr/target.htm 記述例↓ 【a.html】 <html><head> </head> <body> <a href="b.html#b-1" target="ai" alt="b-1へリンク"> <img src="http://oshiete1.goo.ne.jp/images/goo.gif" width="100" height="16"></a>target ai<br><br> <a href="b.html#b-2" target="ai" alt="b-2へリンク"> <img src="http://oshiete1.goo.ne.jp/images/goo_h1_50b.gif" width="100" height="16"></a>target ai<br><br> <a href="b.html#b-1" target="ax">target ax へ b-1 リンク</a><br><br> <a href="http://www.goo.ne.jp/" target="ax">target ax へ goo を表示</a><br><br> ==インラインフレーム ai==<br> <iframe src="b.html" align="top" name="ai">ここはインラインフレーム name=ai</iframe><br><br> ==インラインフレーム ax==<br> <iframe src="http://www.goo.ne.jp/" align="left" name="ax">ここがインラインフレーム name=ax</iframe> </body> </html> 【b.html】 <html><head> </head> <body> このb.htmlにはアンカーをいくつかつけています。 <br><br> <a name="b-1"></a>ここはb-1です <br><br><br><br><br><br> <a name="b-2"></a>ここはb-2です <br><br><br><br><br><br> ここは、b.html の中です <br><br><br><br><br><br> ここは、b.html の最後です </body> </html>

参考URL:
http://www.tohoho-web.com/html/attr/target.htm
kotokotocafe
質問者

お礼

いろいろやってみたのですが どうやら、良くみるとなんとか反応しているようなのです。 良くみるとというのは、クリックしても何にも起きないのですが、iframe用に出ている縦スクロールバーの上を一回ポンとクリックする、もしくはiframeの中で右クリック→最新の情報に更新、を選択すると任意の場所に移動します。 …なぜこのような反応になるのかわかりません。 この質問はこのままで、新しい質問を立てようと思っています。 ありがとうございました。

kotokotocafe
質問者

補足

ありがとうございます。 ターゲットはいつも使っているので 理解していると思うのですが。 guraさんの例に習ってこのように書きました↓ すると動きました。 しかしこの内容を実際のページに適応してみると やはり動きません。 なにかやってはいけないことをしているのでしょうか。 拡張子がhtmだからとか…。うーん違いますよね。 実際のページを載せることが出来ないので なにが悪いのかわかりにくいですよね。 でもhtmlで可能だということがわかりすっきりしました。ありがとうございました。 もうちょっと考えて見ますので、何か思い当たることがあればお願いします。 a.htmlの中身 <html><head> </head> <body> <iframe src="b.html" name="ai" border="0px" style="border:dotted 0pt;border-color:#ffffff;" frameborder="0" width="100" height="100"scrolling="yes" allowtransparency="true"></iframe> <a href="b.html#b-2" target="ai"><img src="images/come_03.gif"width="81" height="45" border="0"></a> </body> </html> b.htmlの中身 <html><head> </head> <body> <a name="b-1"></a><img src="geta.jpg" width="10" height="10"> b-1 <br> <br> <br> <br> <br> <br> <br> <br> <br> <a name="b-2"></a><img src="geta.jpg" width="10" height="10"> b-2<br> <br> <br> <br> <br> <br> <br> <br> </html>

関連するQ&A

  • インラインフレーム内でのテーブル位置指定が上手くいきません

    インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが 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
  • 1つの画像オンマウスで3つの画像を切り替えたい!

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

  • 画像の切り替えの記述形式について

    <a href="#A" onclick="document.A.src='../img/gif/B1.gif'"><img src="../img/gif/A1.gif" alt="" width="133" height="176" name="A" id="A" /></a> 画像としてA1.gifがあるのですが、A1.gifを押すと、リンク先のB1.gifが呼び出されて、変更されるというスクリプトになっています。 上のような記述をしているのですが、この場合、指定している#Aのアンカーリンクを指定しているため、画像を押す事に移動してしまいます。移動をしないようにするにはどうしたらいいですか? <a href="javascript:openURL('URL');"><img></a> このような形式で、アンカーリンクにならずに、上のような操作が可能になるという話を聞きました。 こういう場合、どのように記述したらいいですか?

  • インラインフレームが消えてしまいました

    行間を空けようと思い、body内に <span style="font-size:17px; line-height:20pt;"> を入れたとたん、インラインフレームが表示されなくなってしまいました。 ??と思い<span style="font-size:17px; line-height:20pt;">を消してみてもインラインフレームが戻ってきません。他にやった操作はないはずなのですが・・・(<br>をいくつか削ったりはしました) インラインフレームのタグもいじっていません。 なにがいけないのか、さっぱり分かりません。inline.htmlもきちんと同じフォルダ内にあります。 私はHTMLもcssもとても初心者なので、凄く簡単なところで見落としがあるのかもしれません。 と思って小一時間ほどソースを見直してみたのですが、原因となるものが分からず、困っています。 「こういう状況下ではインラインは使えない」というものでもあるのでしょうか・・・? 一応ソースを貼っておきます。******は単なる文字列だと思ってください。 <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta content="****" name="keywords"> <meta content="**************" name="description"> <meta name="description" content="******************" /> <meta name="keywords" content="*************************" /> <link rel="stylesheet" href="style.css" media="all" type="text/css"> <title>****************</title> </head> <body><body background="title.gif"> <span style="font-size:17px; line-height:20pt;"> <h1 id="HEADER"><img src="title.jpg" alt="タイトル画像"></h1> <br><br><br> <ul id="NAV"> <li><a href="index.html" title="ホームに戻ります"><img src="home.gif" border=0 alt="ホームに戻ります"></a></li><br><br> <li><a href="main.html" title="********"><img src="bosyu.gif" border=0 alt="********"></a></li><br><br> <li><a href="http://*********.com/" title="******"><img src="blog.gif" border=0 alt="管理人のブログです"></a></li><br><br> <li><a href="douga.html" title="********"><img src="douga.gif" border=0 alt="*****"></a></li><br><br> <li><a href="http://*********/" title="***********"><img src="bbs.gif" border=0 alt="掲示板"></a></li><br><br> <li><a href="link.html" title="お世話になっているサイト様です。ネチケットを守ってお伺いして下さい。"><img src="link.gif" border=0 alt="リンク"></a></li> <br><br> <li><a href="http://******" title="******"><img src="mail.gif" border=0 alt="メールフォーム"></li></a> </li> </ul> <div id="CONTENT"> <center><b> <font color=blue> <br> *****************<br> ****************<br> <font color="green><u>****</u><br> ***********<br> ***********</font><br><br> <iframe src="inline.html" width="50%" height="150" name="koushin">ここはインラインフレームです。表示されない場合はお使いのブラウザが対応しておりませんです。。。</iframe><br><br><br> <h1><font color=red>**********</h1><br> ********<br> ******** <br> <a href=*****.html target="_blank"><br><br> <font size=5>****</font><br></a> ******<br> ****** </font><br> *************<br> *************<br><br> <font color=#00008B><h1>*******</h1> *******************<br> *******************<br><br> *******************<br> *******************<br> *******************<br><br> ************</font> <br> <br> <br> <!-- FC2カウンター ここから --> <center><bottom> <script language="JavaScript" type="text/javascript" src="http://counter1.fc2.com/counter.php?id=3362754"></script><noscript><img src="http://counter1.fc2.com/counter_img.php?id=3362754"><br>undefined</noscript> <!-- FC2カウンター ここまで --> </div> </body></html> どこを見落としていますでしょうか・・・ とてもお手数なのですが、どうぞお力をお貸し下さい。

    • 締切済み
    • CSS
  • インラインフレームに画像を使うと枠がでる><

    HPについての質問です>< HTMLタグを使用して作成してるんですが・・・ インラインフレームでつくりたいんです。 http://www.htmq.com/html/iframe.shtml ↑これのかんじで おしたらURLがフレームにでるかんじでつくりたいんですが・・・ ここのはボタンが字なんですが・・・私は画像でつくりたいんです>< 画像だけでなくさらにロールオーバー(http://masaboo.cside.com/new_source/sr_15.html) でつくろうと思って頑張ってやったんですが・・・。 <a href="※※.html" target="sample"><img src="※※.gif" onmouseover="this.src='※※.gif'" onmouseout="this.src='※※.gif'"></a><br> こんな感じであと下にフレームをつけて <IFRAME src="※※.html" width="600" height="400" scrolling="NO" frameborder="0" style="border:1px dotted #000000;"></IFRAME> こんな感じでつくったら、なぜか画像(ボタン)に枠がついてしまって>< どうやったら消せますか!? 教えて下さい、お願いします>< (※画像はこうなってしまったってかんじなんですが・・・※)

  • ウインドウを狭めてもレイアウトが崩れない方法

    ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を3列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>

    • ベストアンサー
    • HTML
  • テーブル幅を完全に指定したい

    テーブル幅の指定方法を教えてください。 以下のような記述のテーブルを何列も羅列して 表を作ろうと思っています。 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
  • インラインフレーム内へのリンク

    質問させて頂きます。 インラインフレーム内へのリンクが上手くいかなくて困っています。 name="main" でインラインフレームに名前を付け、外部からはtarget属性でtarget="main"と指定してリンクをはっているのですが、どういうわけだか新しいウインドウが開いてしまいます。 ソースをのせておきますので、どこがいけないのか御指導頂けないでしょうか。お願い致します。(暫定的にYAHOO!にリンクさせています) 以下ソース↓ <html> <head> <title>インラインフレーム</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF"> <table width="500" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="17"><a href="http://www.goo.ne.jp" target="main">YAHOO!</a></td> </tr> <tr> <td height="300"><iframe border="0" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="yes" style="border:solid 1pt cc0000" src="http://www.yahoo.co.jp" width="500" height="300"></iframe></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか? ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • <iflame src="">インラインフレームの中のページを時間差でページを変更したい

    <iflame src="">インラインフレームの中のページを時間差でページを変更したいのですがどうすればいいでしょうか? <iframe src="ページA" width="300" height="100" frameborder="0" scrolling="no"> だけが表示されているのですが ここに、10秒後にページB、さらに30秒後にページCと表示させたいのですが、どうすればよいでしょうか?

    • ベストアンサー
    • HTML