別フレームからの背景切り替え

解決済

質問者：hi-Roki
質問日時：2007/05/29 15:36
回答数：3件

同一ページでの背景切り替えは
(1)<SCRIPT LANGUAGE="JavaScript">

</script>
///////////////////////////////////////////////////////////
(2)<a href="#" onMouseOver="imagechange('pic1');" onMouseOut="imagechange('clear');"><img src="http://www001.upp.so-net.ne.jp/oka/bg_wahuu.gif" border="0" width="144" height="158"></a>
///////////////////////////////////////////////////////////
以上の操作でできたのですが、
背景素材のサムネイルを別フレームに配置したい場合の、
別フレームからの背景切り替えの方法をご存知の方は教えていただけないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： steel_gray
回答日時：2007/05/29 17:22

サンプルです。

・「ここに書き換えたいframeのname」という部分を書き換える。
・画像は適当に書き換えて。
・一連の画像は全てid="bglist"のブロックに収める（ulじゃなくてもかまいません）

<html>
<head>
<script type="text/javascript">
function imagechange(listId){
var imgList = document.getElementById(listId).getElementsByTagName('img');
for(var i=0;i<imgList.length;i++){
imgList[i].onmouseover = function(){imagechangeSub(this)};
imgList[i].onmouseout = function(){imagechangeSub()};
}
}
function imagechangeSub(imgO){
parent.frames['ここに書き換えたいframeのname'].document.body.style.background =
(imgO)?'URL('+imgO.src+')':'';
}
</script>
</head>
<body onload="imagechange('bglist')">

<ul id="bglist">
<li><img src="bg_wahuu.gif" width="144" height="158"></li>
<li><img src="bg4.gif" width="144" height="158"></li>
<li><img src="wpckp.gif" width="144" height="158"></li>
</ul>

</body>
</html>

この回答への補足

即回答ありがとうございます。

今回の別フレーム操作は初めてなので、只今試しております。
(1)この全ての記述は背景を切り替えるページにするのでしょうか？
(2)サムネイルにする別フレームに記述する内容は、どの部分なのでしょうか？

補足日時：2007/05/29 17:43

通報する

- 0
- 件

通報する

No.2

回答者： steel_gray
回答日時：2007/05/29 19:24

＞(1)この全ての記述は背景を切り替えるページにするのでしょうか？

サンプル画像があるフレームです。
このフレームのサンプル画像にマウスを乗せると、
もう一方のフレームの背景が変わります。

＞(2)サムネイルにする別フレームに記述する内容は、どの部分なのでしょうか？
上記通り。もう一方のフレームの記述は特に必要ありません。

この回答への補足

即回答ありがとうございます。
私の記述も説明不足で申し訳ございません。

見本ページの一部分にインラインフレームを入れ、
そのフレーム内に表示されたサムネイルをクリックして
見本ページの背景を変更する

というのを考えていました。

そこで、
>もう一方のフレームの背景が変わります。
(1)変えたい部分がフレームでなく、見本ページの背景の場合はどのように設定すればよいのでしょうか？

(2)オンマウスで切り替わるのでなく、クリックで変える際の記述はどのようにするのでしょうか？

////////////////////////////////////////////////
重ね重ねのご質問、本当に申し訳ございません。
お手数をお掛け致しますが、宜しくお願いいたします。

補足日時：2007/05/29 19:42

通報する

- 0
- 件

通報する

No.3ベストアンサー

回答者： steel_gray
回答日時：2007/05/29 20:00

以下がiframe内に読み込むページのサンプルになります。

iframe内の画像をクリックすると、親ページ（見本ページ）の背景が代わります。
親ページの記述は特に必要ありません。（iframeで読みこむだけです。）

<html>
<head>
<title></title>
<script type="text/javascript">
function imagechange(listId){
var imgList = document.getElementById(listId).getElementsByTagName('img');
for(var i=0;i<imgList.length;i++){
imgList[i].onclick = function(){imagechangeSub(this)};
}
}
function imagechangeSub(imgO){
parent.document.body.style.background =
(imgO)?'URL('+imgO.src+')':'';
}
</script>
</head>
<body onload="imagechange('bglist')">
<ul id="bglist">
<li><img src="画像１" ～略～></li>
<li><img src="画像２" ～略～></li>
<li><img src="画像３" ～略～></li>
</ul>
</body>
</html>