No.2ベストアンサー
- 回答日時:
こんばんは。
一応参考URLを元に作ってみました。
●画像が表示されるiframeを「a」、リンク文字を表示するiframeを「b」として説明します。
まずaフレームに
<IMG SRC="画像の名前" ALT="○○" WIDTH="画像の幅" HEIGHT="画像の高さ" NAME="def">
を<BODY>内に記述します。
次にbフレームなんですが、とりあえず参考URLのソースを全てコピーして貼り付けて下さい。
次にそのソースから下記の記述を消去して下さい。
●<BODY>~</BODY>内の
<IMG SRC="image/start.jpg" ALT="START" WIDTH="150" HEIGHT="100" NAME="def">
次にソースに付け足す部分です。
●<HEAD>~<HEAD>内の
// ポイント時の処理
function On(name) {
if (document.images) {
document.images['def'].src = eval(name + '.src');
}
↑document.images['def'].src = eval(name
ってありますよね?
そのdocumentの前にparent.a.と付け足して下さい。
parent.a.document.images['def']~
↑みたいに。
parent.a.の<a>とはフレームのnameです。<a>は質問者さんが指定したフレーム名に変えて下さい。ココでは画像が表示されるフレームを<a>としてるので、<a>とします。
●同じく<HEAD>~<HEAD>内の
// 放した時の処理
function Off() {
if (document.images) {
document.images['def'].src = img0.src;
}
もdocumentの前にparent.aと付け足して下さい。
以上で表示されるかと思います。
簡単なフレームページを作ってみたんですけど、表示されました。
あと<BODY>~</BODY>内の
<A HREF="change3.html" onMouseOver="On('img1')" ~
change3.htmlはJavaScript:void(0)に変えてもイイかと思います。クリックしてリンクを貼る場合は、○○.htmlに変えて下さい。
常に表示されてる画像は<// 通常の画像>を、一枚目、二枚目、三枚目は<// ポイント時の画像1・2・3>の青い文字の所を好きな画像の名前に変えて下さい。
このくらいかな。頑張って下さい。
参考URL:http://www.tagindex.com/javascript/link/change3. …
この方法で思い通りに動かせました。
更に文字列にリンクを貼ることを質問し忘れていたのですが、
そこまで、気がついて下さってホントにありがとうございました。
助かりました!
No.1
- 回答日時:
仮に、iframeを2つ持つ側のファイルをindex.htmlとでもしておき、リンク文字を持つ側のファイルをiframe.htmlとしておきます。
index.htmlがわで、当然のように、一方のiframeは
<iframe src="iframe.html">リンク文字ある方</iframe>
で、画像表示側のiframeはidとnameをつけておきます。例えば、IF2とする場合、
<iframe id="IF2" name="IF2">画像表示用</iframe>
で、iframe.htmlのアンカータグ(<a>)を、
<a href="#" onclick="return (false);" onmouseover="window.parent.document.getElementById('IF2').src = '表示する画像のパス';" onmouseout="window.parent.document.getElementById('IF2').src = '元画像のパス'">リンク文字</a>
としておけば動きませんか?
私はどうにか動いてましたが、、、、
これはソースが長くってかったるいんで、
function ChangeImage(path){
window.parent.document.getElementById('IF2').src = path;
}
とでもしておいて、
onmouseover="ChangeImage('表示する画像のパス');"
onmouseout="ChangeImage('元画像のパス');"
とでもいた方が他のことにも使えて良いと思いますが、、、
これで動作しますかねぇ。。。。
この方法で試して、質問のとおり動きました。
全然javascriptの知識がないのに、
ホムペ作りを手伝わされている私なのですが、
この方法も今後使う機会が出てくると思います。
助かりました~。
ご指南ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryスライドショー画像への...
-
画像のランダム表示が遅い?
-
複数の画像を先に読み込ませ表...
-
テキストにオンマウスで指定箇...
-
ホォルダの読む込み
-
曜日別背景画像の固定
-
1枚の画像をクリックすると複数...
-
JavaScriptとチェックボックス...
-
画像をフォルダに入れれば表示...
-
画像に透明度をかけて、変数に...
-
WEBページ立ち上げ時に1回のみ...
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
背景色を透明化
-
JavaScriptにて『var val2 = "d...
-
【jQuery】2分割レイアウトで、...
-
jQueryで電卓を作っているのですが
-
JavaScriptでの画像切り替えを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
bxsliderにて読み込み後に内容...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
クリッカブルマップの一部分だ...
-
innerHTMLで、表示すると、一部...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
美人時計風JAVAスクリプトが上...
-
曜日と時間を指定して表示画像...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
特定の画像を非表示にする方法
-
iframe内のリンク文字のマウス...
おすすめ情報