- ベストアンサー
別フレームからの背景切り替え
- 別フレームからの背景切り替えの方法を教えてください。
- 同一ページでの背景切り替え方法については既にわかっています。
- ですが、背景素材のサムネイルを別フレームに配置する場合の背景切り替え方法がわかりません。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
以下が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>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
＞(1)この全ての記述は背景を切り替えるページにするのでしょうか？ サンプル画像があるフレームです。 このフレームのサンプル画像にマウスを乗せると、 もう一方のフレームの背景が変わります。 ＞(2)サムネイルにする別フレームに記述する内容は、どの部分なのでしょうか？ 上記通り。もう一方のフレームの記述は特に必要ありません。
補足
即回答ありがとうございます。 私の記述も説明不足で申し訳ございません。 見本ページの一部分にインラインフレームを入れ、 そのフレーム内に表示されたサムネイルをクリックして 見本ページの背景を変更する というのを考えていました。 そこで、 >もう一方のフレームの背景が変わります。 (1)変えたい部分がフレームでなく、見本ページの背景の場合はどのように設定すればよいのでしょうか？ (2)オンマウスで切り替わるのでなく、クリックで変える際の記述はどのようにするのでしょうか？ //////////////////////////////////////////////// 重ね重ねのご質問、本当に申し訳ございません。 お手数をお掛け致しますが、宜しくお願いいたします。
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです。 ・「ここに書き換えたい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)サムネイルにする別フレームに記述する内容は、どの部分なのでしょうか？
お礼
ありがとうございました。 解決いたしました。 再三の質問に対しても、快く丁寧にご対応いただき誠にありがとうございました。 ありがとうポイントでは足りないくらいの感謝の念を抱いております。 本当にありがとうございました。