- ベストアンサー
親フレームのリンクからアイフレーム内の背景画像を位置指定して変更する
アイフレーム内の最初に表示してあるページ内に <style type="text/css"> <!-- body{ background-attachment : fixed; background-repeat : no-repeat } --> </style> を書いて、親フレームのリンクにオンマウスオーバーとjavascriptをつかって、 背景画像を左上固定で繰り返さない指定はできたのですが、 指定する背景画像の位置をその都度変えたい場合に、 親フレーム内のリンクから指定する方法をご存知の方はどうか教えていただけないでしょうか？検索など、いろいろやってみたのですがどうもみつからないんです…
- nancy_
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
- auty
- ベストアンサー率58% (284/486)
>>> 親フレームのリンクにオンマウスオーバーとjavascriptをつかって、 背景画像を左上固定で繰り返さない指定はできたのですが、 のところが、いまいち理解できてないのですが、 >>> 親フレーム内のリンクから指定する方法 親フレームからiframeにアクセスする方法は、 １番目のiframeは、 frames[0] なので、背景画像の位置は、 frames[0].document.body.style.backgroundPosition で変更できると思います。例えば frames[0].document.body.style.backgroundPosition="right bottom"; またフレームに名前を name="fname" の様に付けておけば frames['fname'].document.body.style.backgroundPosition="right bottom"; で可能だと思います。
お礼
即回答ありがとうございます！返事が遅くなってしまい申し訳ありません。 説明が足りていなくてすみませんでした…、 >>> 親フレームのリンクにオンマウスオーバーとjavascriptをつかって、 背景画像を左上固定で繰り返さない指定はできたのですが、 のところは、親フレームの<head>に <script type="text/javascript"> <!-- if (navigator.appName == "Microsoft Internet Explorer") { clear = new Image(); clear.src=""; pic01 = new Image(); pic01.src="../img/view.gif"; pic02 = new Image(); pic02.src="../img/view.gif"; pic03 = new Image(); pic03.src="../img/view.gif"; pic04 = new Image(); pic04.src="../img/view.gif"; pic05 = new Image(); pic05.src="../img/view.gif"; pic06 = new Image(); pic06.src="../img/view.gif"; } function imagechange(imgName){ if (navigator.appName == "Microsoft Internet Explorer") { frames['e'].document.body.background = eval(imgName + ".src"); frames['e'].document.body.style.backgroundPosition="left top"; } } --> </script> を書き、<body>のところに <a onmouseover="imagechange('pic01');" onmouseout="imagechange('clear');"><img src="../img/t1.gif" border="0"></a> <a onmouseover="imagechange('pic02');" onmouseout="imagechange('clear');"><img src="../img/t2.gif" border="0"></a> <a onmouseover="imagechange('pic03');" onmouseout="imagechange('clear');"><img src="../img/t3.gif" border="0"></a> を記述してできたのですが、 <a>の画像に触れるとそれぞれ指定してある画像が親フレーム内に一つあるアイフレーム内の背景に位置指定されて表示され、 またそれらの背景画像の位置がそれぞれ異なるように指定したいのです。 例えば、上の記述でいうと親フレームの t1.gif に触れると アイフレ内の背景画像に view01.gif が左上指定で表示され、 また t2.gif に触れた場合は同アイフレ内の背景画像は view.02.gif が真ん中指定で表示されるというようなイメージです。 わかりにくくてすみません…。 お忙しい中お手数をおかけしますが、ご存知でしたらどうかもうすこし教えて頂けないでしょうか。
お礼
回答ありがとうございます！ ご回答くださった方々の解説を参考にして、なんとか先へ進むことが出来ました…！ 本当にありがとうございました。お忙しい中、すみませんでした。