iframe内のリンク文字のマウスオーバーで別のiframeに画像を出すには？

Question

こんにちわ。

一つのページにiframeが二つあるのですが、
そのうちの一つのiframe内のリンク文字をマウスオーバーすると、もう一つのiframeに画像が表示されて、
マウスアウトすると元の画像に戻るようにしたいのですが、
そのように出来るのでしょうか？
ご存知の方、いらっしゃれば、
その書き方を教えて下さい！
よろしくお願いします。

gaviru44 · Accepted Answer

こんばんは。一応参考URLを元に作ってみました。 ●画像が表示されるiframeを「ａ」、リンク文字を表示するiframeを「ｂ」として説明します。まずａフレームに

を内に記述します。次にｂフレームなんですが、とりあえず参考URLのソースを全てコピーして貼り付けて下さい。次にそのソースから下記の記述を消去して下さい。 ●～内の START

次にソースに付け足す部分です。 ●～内の // ポイント時の処理 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.のとはフレームのnameです。は質問者さんが指定したフレーム名に変えて下さい。ココでは画像が表示されるフレームをとしてるので、とします。 ●同じく～内の // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } もdocumentの前にparent.aと付け足して下さい。以上で表示されるかと思います。簡単なフレームページを作ってみたんですけど、表示されました。あと～内のを、一枚目、二枚目、三枚目はの青い文字の所を好きな画像の名前に変えて下さい。このくらいかな。頑張って下さい。参考URL：http://www.tagindex.com/javascript/link/change3.html

crosis · Answer

仮に、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('元画像のパス');"
とでもいた方が他のことにも使えて良いと思いますが、、、

これで動作しますかねぇ。。。。

iframe内のリンク文字のマウスオーバーで別のiframeに画像を出すには？

こんばんは。

仮に、iframeを2つ持つ側のファイルをindex.htmlとでもしておき、リンク文字を持つ側のファイルをiframe.htmlとしておきます。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング