インラインフレームを切り替える際、
iframeにnameを設定して、aタグにtargetで指定すれば切り替わる
ことまでは突き止めたのですが、
切り替えをしたい画像ボタンと、
iframeが離れているので、
まず、iframeがある部分までアンカーで飛び、
かつ、iframe内も同時に切り替える方法を知りたいのですが、
もしご存知の方がいらっしゃったらご教示いただければ幸いです。
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

今ザッと確認した限りでは、javascriptなんかなくても



<a href="hoge.html#header" target="frame01">go</a>

みたいな書き方で、hoge.htmlの中にid="header"な要素があるだけ
でオッケーでしたけどね。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございますTT
なるほど!すごくシンプルだったんですね。。
親ページのアンカーで飛ばすことにとらわれていました。
iframe内にアンカーをせっていしていますので、そちらに飛ばしてみます!!

お礼日時:2009/05/24 01:02

回答2の者です。



> 回答3

なるほど。
iframeの中のアンカーに飛ばすと、親ページの方も、iframeが見える位置にまでスクロールするんですね。
それなら、iframeの中に表示するページにダミーのアンカーを埋め込んでおけば、JavaScriptを使わなくても、
HTMLだけで問題なく表現できそうです。
    • good
    • 0

HTMLレベルでは、「アンカーで飛ぶ」と「iframeの内容を切り替える」を同時に行うことはできません。


JavaScriptを使うしかないと思います。

リンクタグを <a href="iframeの移動先URL" target="iframeの名前" onclick="location.hash='#iframeのある位置へのアンカー名';">と指定すれば、
iframeの更新とアンカーへの移動が同時にできます。

…と書いている間に、回答1が書かれましたが、
どちらもJavaScriptを使うという方針は同じで、
回答1: HTMLでアンカーに飛び、JavaScriptでiframe更新
私の回答: HTMLでiframe更新、JavaScriptでアンカーに飛ぶ
という違いがあります。

JavaScriptを使用できなくしている環境での閲覧を考えると、
HTMLでの指定はiframe更新にしておいた方が無難かと思います。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございますTT

お礼日時:2009/05/24 01:00

インラインフレームの id を "id1" として次のようにすればどうでしょう?



(クリックされるa要素)
<a id="id0" href="#id1"><img src="***"/></a>

(スクリプト)
window.onload = function() {
document.getElementById('id0').onclick = function() {
document.getElementById('id1').src = 'http://www.google.co.jp';
}
}
    • good
    • 0
この回答へのお礼

ご回答ありがとうございますTT

お礼日時:2009/05/24 01:00

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qかわいい無料素材サイトを教えてください

フェアリー系、パステル系、ネオン系、80srockの無料素材サイトを教えてください!!

背景画、デコメもあると嬉しいです♪

Aベストアンサー

無料でデコメから動く待ち受け合成や自分で作れるデコメ作成アプリなど何でもあります。メール送受信画像が作れたり、顔文字辞典、セリフ画、など無料とは思えないくらいの機能が揃ってます。
マイページには自分が作った画像が保存できます。

無料版
http://m.gal-deco.com/

公式サイトの方はもっと凄いです。
どちらを選択するかはおまかせします。
公式サイト
http://gal-deco.com/

参考URL:http://gal-deco.com/

Qtargetを他フレームとアンカーポイント両方指定したい場合

どなたか、お願いいたします。

リンク先のターゲットの指定ですが、
他のフレームを指定する場合、
<a href="test.html" target="main(フレーム名)">
ですよね。
さらに、ページのアンカーポイントへの指定は
<a href="test.html" target="top(アンカー名)">
だと思うのですが、
他フレームへの指定で、更にページのアンカーポイントを指定する場合、どうすれば良いのでしょうか?

初心者でお恥ずかしい限りですが、よろしく
お願いいたします。

Aベストアンサー

ソースを拝見しましたが、あの状態のソースで検証,提示している姿勢が非常に問題かと思います。

というのも、#2 の方への補足で
>スクロールバーが上に戻らないのです
といいますが、まずフレーム(インラインフレーム)のスクロールは no と指定されています。
となるとなんらかの仕掛けが別途されているはず・・・。
(実際、CSS を無効にしつつスクロールを yes とした処、問題は発生しませんでした。)


まず問題が発生したのなら、その問題点と思われる処だけのソースで検証しましょう。
その後で、再現するまでこつこつといろいろ付加してみましょう。

少なくとも現在、あのソースでは調べるのは面倒すぎます・・・。
特にスタイルシートの意図が判りにくく・・・。

Qかわいい女の子のイラスト素材集(もしくは書いてくれる人)

かわいい女の子のイラストを探してます。

サンプルがなく説明しずらいですが、
風俗求人誌やバイト雑誌に使われているような、
かわいいアニメ調のイラストが希望です。

広告やwebに掲載したいので、
フリーでもかまいませんが、
イラストレータなどでのデータ化していればベストです。

ネットで素材集やリンク先をめぐってみましたが、
納得するものがなく。
イラスト書きを請け負っていただける方でもいいのですが・・・

イラスト集の入手方法や手配方法を、
なにかご存知の方いらっしゃればよろしくお願いいたします。

使用環境は、
WinXPで、
Illustrator 9・10 です。
前にそんなイラストレータ素材を見たことがあるので、
どこかにあるかとはおもうですが・・・

Aベストアンサー

こんにちは。

ここでは「人探し・求人」は残念ながら出来ないのですよ…。
私は、実際かけますが(プロです)、だからと言ってどうやって連絡取るのでしょう?個人同士での連絡は取れない規約です。

では、キャラクターの素材集のサイトをご紹介します。
http://www.dex.ne.jp/mantan/frame.cgi?rtn=3&tmptype=/mantan/search/std2_search_redirecter.jhtml&channel=10&db=d&ldtype=t&n_list=12&ctgptn=1&ctg=10171214

ここの素材は有名で、あちこちでよく使われています(女の子のイラストでなくても)。
会員になれば、DLし放題ですので、一度ごらんになってみてください。

参考URL:http://www.dex.ne.jp/mantan/frame.cgi?rtn=3&tmptype=/mantan/search/std2_search_redirecter.jhtml&channel=10&db=d&ldtype=t

こんにちは。

ここでは「人探し・求人」は残念ながら出来ないのですよ…。
私は、実際かけますが(プロです)、だからと言ってどうやって連絡取るのでしょう?個人同士での連絡は取れない規約です。

では、キャラクターの素材集のサイトをご紹介します。
http://www.dex.ne.jp/mantan/frame.cgi?rtn=3&tmptype=/mantan/search/std2_search_redirecter.jhtml&channel=10&db=d&ldtype=t&n_list=12&ctgptn=1&ctg=10171214

ここの素材は有名で、あちこちでよく使われています(女の子のイラストでなくても)...続きを読む

QIFRAMEとA NAMEについて 少しわかりにくいです

index.html内にIFRAMEでA.htm<IFRAME SRC="A.htm#b">
というように載せた場合、
index.htmが一番上で表示されずに<A NAME="b">がある位置で表示されます。
例として
index.htmは
<title>
<font>題名<br>×15個
<IFRAME SRC="A.htm#b></IFRAME><br>×15個

A.htmは
<font>ああああああああ
<br><br><br>
<A NAME="b">
いいいいいいいい

です。index.htmにアクセスした場合、"題名"の位置で表示されずインフレーム内の<A NAME="b">の位置が一番上で表示されます。つまりずれるので題名がみれなくなります。 ちょっとわかりにくいですが原因と対処方法を教えてください

Aベストアンサー

幾度も申し訳ありません。
前のスクリプトではスクロールが出来ないことに気づいたのでまた新しく作り直してみました。
下の部分をヘッドの中に入れて、ボディタグは

<body onload="Scr()">

にしていただけると上手くいくのではないかと思います。

------------------------------------------------------
<script>
max = 10; as = 0;

function Scr(){
if ( navigator.appName.charAt(0) == "M" ){
scroll(0,0);
if (as < max) {
as = as + 1;
setTimeout("Scr()",4);
}
}}
</script>
------------------------------------------------------


もし上手く動かないときは「max = 10;」の値を増やせば上手く動くかもしれません。

幾度も申し訳ありません。
前のスクリプトではスクロールが出来ないことに気づいたのでまた新しく作り直してみました。
下の部分をヘッドの中に入れて、ボディタグは

<body onload="Scr()">

にしていただけると上手くいくのではないかと思います。

------------------------------------------------------
<script>
max = 10; as = 0;

function Scr(){
if ( navigator.appName.charAt(0) == "M" ){
scroll(0,0);
if (as < max) {
as = as + 1;
setTimeout("Scr()",4);
}
}}
...続きを読む

Qかわいい無料レンタル掲示板のあるサイトを知りませんか

たくさん探してみたのですが、無料のレンタル掲示板はあまりかわいいものがなく、あっても登録を締め切っています。背景や文字に凝っているかわいい掲示板のあるサイトを知っている方いらっしゃいませんか?

Aベストアンサー

こちらで探してみたことはありますか?
http://www.freeservice.jp/contents/bbs.html
http://www.kooss.com/bbs/

使ってたことがあるのは、参考URLの「UIC」です。

今のBBSの多くが色々設定が変更できるので、デフォルト以外に背景も可愛いのにかえられたりしますよ。

参考URL:http://uic.to/cgi/all_list.html

QIFrame内部で名前付きリンク(アンカー)を使用すると勝手にスクロールする

口で説明するのは面倒くさいので以下に例を作りました。

-t1.html-
<html>
<a href="t2.html#b" target="ifmain">t2-b</a><br>
<a href="t2.html#c" target="ifmain">t2-c</a><br>
<a href="t3.html#b" target="ifmain">t3-b</a><br>
<a href="t3.html#c" target="ifmain">t3-c</a><br>
<iframe name="ifmain" src="t2.html" height="400" width="300"></iframe>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</html>

-t2.html、t3.html-
<html>
<table>
<tr><td height="300"><a name="a">a</a></td></tr>
<tr><td height="300"><a name="b">b</a></td></tr>
<tr><td height="300"><a name="c">c</a></td></tr>
</table>
</html>


t1.htmlを実行して頂ければわかるのですが、
t1からIFrame内部にアンカーで移動させる場合、
IFrame内部のスクロールが、なぜか呼び出し元
(windowオブジェクトで言えば、topとかparentの方)が
なぜか移動してしまいます。
呼び出し元のリンクに
onclick="ifmain.location.href=this.href;top.scrollTo(0,0);return false;"
というようなものを組み込んでもうまく動作しません。
(IE、FireFox両方共に)

なんとか回避する術はないでしょうか?
IFrame内部だけ移動すれば十分ですので。

口で説明するのは面倒くさいので以下に例を作りました。

-t1.html-
<html>
<a href="t2.html#b" target="ifmain">t2-b</a><br>
<a href="t2.html#c" target="ifmain">t2-c</a><br>
<a href="t3.html#b" target="ifmain">t3-b</a><br>
<a href="t3.html#c" target="ifmain">t3-c</a><br>
<iframe name="ifmain" src="t2.html" height="400" width="300"></iframe>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<...続きを読む

Aベストアンサー

もっとシンプルな方法があるのかもしれませんが、javascriptで強引に。一瞬画面が移動するのがいやな感じです。

<html>
<div style="height:300px"></div>
<a href="javascript:void(0);" onclick="var t=document.getElementsByTagName('body')[0].scrollTop;document.getElementById('orz').src='t2.html#b';document.getElementsByTagName('body')[0].scrollTop=t;">t2-b</a><br>
<iframe id="orz" name="ifmain" src="t2.html" height="400" width="300"></iframe>
<div style="height:1200px"></div>
</html>

Q無料レンタルできるかわいい日記を探してます。

無料レンタルで検索して調べたら
たくさーんでてきて、困ってます。

これはかわいいって感じの日記ないですか?
使っておられる方教えて下さい。

Aベストアンサー

私が前使っていたトコロです。
かわいい…けどちょっと小さいかな~
まぁ参考までに☆

参考URL:http://cgi.ts-japan.net/

Qアンカータグ()のname属性又はid属性を利用して別ページの指

アンカータグ(<a>)のname属性又はid属性を利用して別ページの指定箇所へジャンプさせているのですが、通常、この方法を利用すると“指定箇所”は、“今見ている画面の最上部”に表示されます。

これを“今見ている画面の【中央】”近辺に毎回表示することは可能でしょうか?

javascriptなどでできるのかなとも思いましたが、自力で作成できるほどの知識がなく、
何か方法があればお教えいただきたいと思いました。

ご存知の方がおられましたら、何かアドバイスをいただければ嬉しいです。
どうぞよろしくお願いいたします。

Aベストアンサー

こんにちは。

意図したいことがいまいち分からないのですが、表示させたい部分の先頭のタグに IDを入れてそこにリンクすればいいでしょう。

Qアイコンがかわいい無料レンタル掲示板

無料レンタル掲示板に関する質問はたくさんありましたが、かわいいアイコンで検索を絞りこむとほとんど出てきませんでしたので質問させていただきます。
以下を満たすレンタル掲示板がありましたら教えてください。

・かわいいアイコンをたくさん選べる
・無料
・ツリー型でないもの

・できれば管理者へのメール送信フォームつき
・できれば過去ログをたくさん残せるもの

その他もしおすすめで使いやすい掲示板がありましたら教えてくだい。

Aベストアンサー

http://www.ardor.jp/bbs/

 私が利用してるのは、これです。条件は大丈夫の筈

参考URL:http://www.ardor.jp/bbs/

Qiframe内cssの切り替えが出来ない

ただいま、styleswitcher.jsを使用しスタイルを動的に切り替えられるページを作成中です。 そこでご質問ですが、iframeを使用しているのですが、スタイルを切り替えてもiframe内のcssは同時に切り替えられません。 どなたか切り替えと同時にiframe内のスタイルも同時に切り替える方法をご存知の方がいらっしゃいましたら教えてください。styleswitcher.jsでなくても構いませんので、よろしくお願いいたします。

Aベストアンサー

こんにちは

styleswitcher.jsは使用したことはないのですが・・・
iframe内は独立した別のページなので自身のスタイルを変えたとしても一緒には変えれません

・・・と言いたいのですが、こちらのやり方(↓)でやっているのであればやりようはあると思います 
http://weblibrary.s224.xrea.com/weblog/webdesign/javascript/styleswitcherjs.html

iframe内のページにも<script ~>と<link ~>をいれて
onclick="setActiveStyleSheet('任意のtitle'); iframe名.setActiveStyleSheet('任意のtitle'); return false;"

とすれば多分できるんじゃないかな~と思います(動作未確認(Operaではこれでも無理かもしれません))


人気Q&Aランキング