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>
教えてください。
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
この回答への補足
ありがとうございます。
ターゲットはいつも使っているので
理解していると思うのですが。
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>
いろいろやってみたのですが
どうやら、良くみるとなんとか反応しているようなのです。
良くみるとというのは、クリックしても何にも起きないのですが、iframe用に出ている縦スクロールバーの上を一回ポンとクリックする、もしくはiframeの中で右クリック→最新の情報に更新、を選択すると任意の場所に移動します。
…なぜこのような反応になるのかわかりません。
この質問はこのままで、新しい質問を立てようと思っています。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
form action="#"
-
画面を開いたときに指定位置ま...
-
インラインフレーム内のアンカ...
-
iframe内の特定の場所にジャン...
-
ドリームウィーバーのアンカー...
-
ページの途中にリンクするとそ...
-
ブラウザ依存?<a name="#xxx" ...
-
sitemap.xmlとサイトマップ.htm...
-
googleサーチコンソールで、重...
-
リンク色とVリンク色を同じペー...
-
オンマウスで出た説明文の色を...
-
dreamweaverCS4で、絶対パスで...
-
うまくリンク先に飛ばないです…
-
掲示板のレスへの リンクの貼り方
-
httpdで接続が拒否される
-
WEBページのヘッダーフッターを...
-
リンク先からリンク元の、同じ...
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
ホームページでファイルをダウ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
form action="#"
-
リンク先からリンク元の、同じ...
-
googleサーチコンソールで、重...
-
<a href="/">トップへ</a> こ...
-
ページの途中にリンクするとそ...
-
画面を開いたときに指定位置ま...
-
httpdで接続が拒否される
-
a:linkのスタイルのインライン指定
-
iframe内の特定の場所にジャン...
-
Preタグ内URLからリンクは張れ...
-
<a target="_top" href="***.ht...
-
リンクの文字とリンクの文字を...
-
ポップアップ画面にアンカーを...
-
マップを使ってページをリンク...
-
WEBページのヘッダーフッターを...
-
DREAMWEAVER アンカーポイント...
-
ページ内の画像だけを一定時間...
-
インラインフレーム内のアンカ...
-
CSS で a hover を個別に適用し...
-
Excel VBAを使ってHTML生成をし...
おすすめ情報