ベストアンサー

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

2005/02/19 22:10

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

MJane
お礼率57% (4/7)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

gaviru44
ベストアンサー率56% (95/168)

2005/02/20 01:11 回答No.2

こんばんは。一応参考URLを元に作ってみました。 ●画像が表示されるiframeを「ａ」、リンク文字を表示するiframeを「ｂ」として説明します。まずａフレームに <IMG SRC="画像の名前" ALT="○○" WIDTH="画像の幅" HEIGHT="画像の高さ" NAME="def"> を<BODY>内に記述します。次にｂフレームなんですが、とりあえず参考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.html

質問者

お礼 2005/02/20 03:15

この方法で思い通りに動かせました。更に文字列にリンクを貼ることを質問し忘れていたのですが、そこまで、気がついて下さってホントにありがとうございました。助かりました！

その他の回答 (1)

crosis
ベストアンサー率66% (14/21)

2005/02/20 00:50 回答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('元画像のパス');" とでもいた方が他のことにも使えて良いと思いますが、、、これで動作しますかねぇ。。。。

質問者