こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

親フレームのリンクからアイフレーム内の背景画像を位置指定して変更する

アイフレーム内の最初に表示してあるページ内に

<style type="text/css">
<!--
body{
background-attachment : fixed;
background-repeat : no-repeat
}
-->
</style>

を書いて、親フレームのリンクにオンマウスオーバーとjavascriptをつかって、
背景画像を左上固定で繰り返さない指定はできたのですが、
指定する背景画像の位置をその都度変えたい場合に、
親フレーム内のリンクから指定する方法をご存知の方はどうか教えていただけないでしょうか?検索など、いろいろやってみたのですがどうもみつからないんです…

投稿日時 - 2008-03-19 18:37:14

QNo.3876884

すぐに回答ほしいです

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

こんにちは

<script type="text/javascript">
<!--
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,pos){
e.document.body.background = eval(imgName + ".src");
if(pos) { e.document.body.style.backgroundPosition=pos; }
}
-->
</script>

<iframe name="e" src=""></iframe>
<a onmouseover="imagechange('pic01','left top');" onmouseout="imagechange('clear');"><img src="../img/t1.gif" border="0"></a>
<a onmouseover="imagechange('pic02','center');" onmouseout="imagechange('clear');"><img src="../img/t2.gif" border="0"></a>
<a onmouseover="imagechange('pic03','right bottom');" onmouseout="imagechange('clear');"><img src="../img/t3.gif" border="0"></a>

ってことですか?

投稿日時 - 2008-03-20 21:15:43

お礼

回答ありがとうございます!
ご回答くださった方々の解説を参考にして、なんとか先へ進むことが出来ました…!
本当にありがとうございました。お忙しい中、すみませんでした。

投稿日時 - 2008-03-24 12:49:27

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

>>> 指定する背景画像の位置をその都度変えたい

同じ画像でもその度に位置が変わると言う事でしょうか。
この場合は、
  1. ランダムに位置を変える。
  2. 表示する位置を順にずらして行く。
といった方法が考えられますが。

たとえば、1.の場合、位置情報を配列に入れておき、
var ichis = ["left top","right bottom","right top"];
random()関数で取り出した後に、backgroundPosition に代入するといったことが考えられます。

frames['e'].document.body.style.backgroundPosition=ichis[Math.random() * random(ichis.length)];

投稿日時 - 2008-03-21 00:07:15

ANo.1

>>> 親フレームのリンクにオンマウスオーバーとjavascriptをつかって、
背景画像を左上固定で繰り返さない指定はできたのですが、

のところが、いまいち理解できてないのですが、

>>> 親フレーム内のリンクから指定する方法

親フレームからiframeにアクセスする方法は、

1番目の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";
で可能だと思います。

投稿日時 - 2008-03-19 19:17:15

お礼

即回答ありがとうございます!返事が遅くなってしまい申し訳ありません。
説明が足りていなくてすみませんでした…、

>>> 親フレームのリンクにオンマウスオーバーと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 が真ん中指定で表示されるというようなイメージです。
わかりにくくてすみません…。

お忙しい中お手数をおかけしますが、ご存知でしたらどうかもうすこし教えて頂けないでしょうか。

投稿日時 - 2008-03-20 18:13:20

あなたにオススメの質問