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

このQ&Aのポイント
  • 別フレームからの背景切り替えの方法を教えてください。
  • 同一ページでの背景切り替え方法については既にわかっています。
  • ですが、背景素材のサムネイルを別フレームに配置する場合の背景切り替え方法がわかりません。
回答を見る
  • ベストアンサー

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

同一ページでの背景切り替えは (1)<SCRIPT LANGUAGE="JavaScript"> <!-- Begin if (navigator.appName == "Microsoft Internet Explorer") { image_directory = "http://members.tripod.co.jp/oka1/"; clear = new Image(); clear.src = image_directory + "clear.jpg"; pic1 = new Image(); pic1.src = image_directory + "bg_wahuu.gif"; pic2 = new Image(); pic2.src = image_directory + "bg4.gif"; pic3 = new Image(); pic3.src = image_directory + "bg6.gif"; pic4 = new Image(); pic4.src = image_directory + "pgwck.gif"; pic5 = new Image(); pic5.src = image_directory + "ngllgch.gif"; pic6 = new Image(); pic5.src = image_directory + "wpckp.gif"; } function imagechange(imgName) { if (navigator.appName == "Microsoft Internet Explorer") { document.body.background = eval(imgName + ".src"); } } // End --> </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> /////////////////////////////////////////////////////////// 以上の操作でできたのですが、 背景素材のサムネイルを別フレームに配置したい場合の、 別フレームからの背景切り替えの方法をご存知の方は教えていただけないでしょうか?

  • HTML
  • 回答数3
  • ありがとう数2

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.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="画像1" ~略~></li> <li><img src="画像2" ~略~></li> <li><img src="画像3" ~略~></li> </ul> </body> </html>

hi-Roki
質問者

お礼

ありがとうございました。 解決いたしました。 再三の質問に対しても、快く丁寧にご対応いただき誠にありがとうございました。 ありがとうポイントでは足りないくらいの感謝の念を抱いております。 本当にありがとうございました。

その他の回答 (2)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

>(1)この全ての記述は背景を切り替えるページにするのでしょうか? サンプル画像があるフレームです。 このフレームのサンプル画像にマウスを乗せると、 もう一方のフレームの背景が変わります。 >(2)サムネイルにする別フレームに記述する内容は、どの部分なのでしょうか? 上記通り。もう一方のフレームの記述は特に必要ありません。

hi-Roki
質問者

補足

即回答ありがとうございます。 私の記述も説明不足で申し訳ございません。 見本ページの一部分にインラインフレームを入れ、 そのフレーム内に表示されたサムネイルをクリックして 見本ページの背景を変更する というのを考えていました。 そこで、 >もう一方のフレームの背景が変わります。 (1)変えたい部分がフレームでなく、見本ページの背景の場合はどのように設定すればよいのでしょうか? (2)オンマウスで切り替わるのでなく、クリックで変える際の記述はどのようにするのでしょうか? //////////////////////////////////////////////// 重ね重ねのご質問、本当に申し訳ございません。 お手数をお掛け致しますが、宜しくお願いいたします。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

サンプルです。 ・「ここに書き換えたい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>

hi-Roki
質問者

補足

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

関連するQ&A

  • 背景ランダム

    JavaScriptを使って背景をランダムに変更したいので すが、その背景ごとにを左上固定や縦リピートなど を設定することは出来るのでしょうか? 宜しくお願い致します ちなみにCSSは基本だけですが理解しています <SCRIPT LANGUAGE="JavaScript"> <!-- function randomWall() { if (navigator.appVersion > '5' || (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion > '4')) { var max = 6; wall = Math.floor(Math.random() * max) + 1; if (wall == 1) { document.body.background = '1.gif' } else if (wall == 2) { document.body.background = '2.gif} } } //--> </SCRIPT>

  • JQueryによるclass名での背景切り替え

    下記ソースでおかしな挙動がでているので質問させて頂きます。 jQuery導入済みで2つのブロックの背景に同じクラス名を指定した上で背景を一定時間ごとに切り替えているのですが、指定していたクラスタをid名からclass名に変えただけで切り替えがおかしくなりました。 id名のとき 00→01→00→01→00→01→…… class名のとき 00→01→00→00→01→01→01→01→…… クラス名にしたことが原因でしょうか? function testBack(obj){ var t = '.changeBg'; if (obj>3){obj=0;} $(t).fadeIn(1000).css('background','url('bg_0'+ obj +'.jpg) center top no-repeat'); obj++; $(t).delay(8000).fadeOut(1000,function(){ setTimeout('testBack('+obj+')', 100); }); } $(document).ready(function(){ if ($('body').attr('class') != 'testBox'){ testBack(0); var img=new Array(); img[0]=new Image(); img[0].src= rootPath+'commons/images/bg_00.jpg'; img[1]=new Image(); img[1].src= rootPath+'commons/images/bg_01.jpg'; } });

  • マウスオーバー・アウトの制御のソース

    複数のボタンでマウスオーバー・アウトの制御のソースを教えてもらったのですが、質問いたします。 この場合、このボタンはオーバーとアウト、それぞれ同じ画像を使用しているのですが、その場合でも全部違ったファイル名をつけなければいけないのでしょうか? 現在はそあしているのですが、何か無駄な気がして・・・。 よしくお願いします。 <SCRIPT LANGUAGE = "JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "images/c1b.gif"; img2on = new Image(); img2on.src = "images/c2b.gif"; img3on = new Image(); img3on.src = "images/c3b.gif"; img1off = new Image(); // MouseOut Images img1off.src = "images/c1a.gif"; img2off = new Image(); img2off.src = "images/c2a.gif"; img3off = new Image(); img3off.src = "images/c3a.gif"; img4off = new Image(); } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }}   function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </SCRIPT>

  • mouseoverとwindow.openを同時に使う方法(フレームを使った状態で)

    こんばんわ。 フレームで無い状態の時は作動するのに、フレームで分けてしまうと効かないので、どうすればいいのか悩んでます。どなたかお詳しい方教えていただけませんでしょうか? よろしくお願い致します。 ちなみに、初心者に近いですので、お手柔らかにお願い致しますm(v v;)m ソースは↓ 略> <script type="text/javascript"> <!-- function subWin(wURL,wName,wOption) { window.open(wURL,wName,wOption); } bName=navigator.appName; bVersion=navigator.appVersion; function on_img(imgName,sw) {}; function browserCheck() {}; function browserCheck(){ if ((bname!="Microsoft Internet Explorer") || (bVersion.substring(0,3)!="2.0")){ return true; }else{ return false; } } if (browserCheck){ image01on= new Image (404,54); image01on.src="banner_on.gif"; image01off= new Image (404,54); image01off.src="banner_off.gif"; } // --> </script> 略> <table border="0" cellpadding="0" cellspacing="0"><tr><td align="left"> <a href="javascript:subWin('w_top01.html','image01','width=350,height=480,toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,resizable=1,scrollbars=1')" onmouseover="changeImg('image01','on')"onmouseout="changeImg('image01','off')" target="_top" style="text-decoration:none;"> <img name="image01" height="54" width="404" src="banner_off.gif" border="0" alt="別ウィンドウ"></a></left></td></tr></table> 略>

  • マウスオーバー

    マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>

  • なぜ「ページでエラーが発生しました。」?

    字数が限られているので、「なぜエラーなのですか?」 -----ここからhead区間 <!--JavaScript Function window.onerror = null; var ver4 = (navigator.appVersion.charAt(0) >= "4"); var NN4 = ver4 && (navigator.appName.charAt(0) == "N"); var IE4 = ver4 && (navigator.appName.charAt(0) == "M"); var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName.charAt(0) == "N")); if(NN3 || NN4 || IE4){ var img_b = new Array(); img_b[0] = new Image(); img_b[0].src = "kbw.jpg" img_b[1] = new Image(); img_b[1].src = "ao.jpg" img_b[2] = new Image(); img_b[2].src = "bcw.jpg" img_b[3] = new Image(); img_b[3].src = "sm.gif" } function B_in(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; } function B_out(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; return false; } // END ---> </SCRIPT> </head> -----ここからbody <BODY onLoad="time(0)"> <SCRIPT LANGUAGE="JavaScript"> <!--- ここから表示 document.write(TodayIMG(0)); //end ---> </SCRIPT>

  • jQueryで背景画像と複数画像を変更

    jqueryで、divのボックス全体をリンクにし、マウスオーバーでdiv内の画像2点とdivの背景画像を変更したいと考えております。 <div class="linkbox">  <img src="image01.gif">  <img src="image02.gif"> </div> マウスオン用の画像は image01_on.gif image02_on.gif bg01_on.gif と、統一して「_on」をつけております。 マウスオーバーで背景を変更する方法とマウスオーバーで画像を変更する方法とボックス全体をリンクにする方法はそれぞれ見つけたのですが、うまく組み合わせることができません… 何か解決策がございましたら教えてください。 よろしくお願いいたします。

  • 画像の不完全な読み込みについて

    ロールオーバー(アウト)で画像切り替えをしています。 MacOSX IE 5.xにおいてロールオーバー(アウト)時の画像の読み込みが途中で終わってしまって、不完全な状態で表示されてしまいます。 *****外部jsファイル******** if(document.images){ var hoge_over=new Image(70,162); hoge_over.src="./hoge.gif"; var hoge_out=new Image(70,162); hoge_out.src="./hoge2.gif"; } function xOver(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_over.src"); } } function xOut(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_out.src"); } } *****htmlファイル******** <a href="./huge.shtml" onmouseover="xOver('hoge');" onmouseout="xOut('hoge');" target="_self"> <IMG NAME="hoge" SRC="./hoge.gif" width="70" height="162" alt="hoge" title="hoge" border=0></a> ************************** 問題が環境にあるのか、javascriptの書き方にあるのか、htmlの書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。

  • この配列は何?

    ホームページビルダーでロールオーバーのスクリプトを自動で書き出したものの一部ですが、 理解不能のところがあります。 以下がスクリプト var swImg; swImg=new Array; function HpbImgPreload() { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var imgName = HpbImgPreload.arguments[0]; var cnt; swImg[imgName] = new Array;//←ここです for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++) { swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image(); swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt]; } } } } HpbImgPreload('_HPB_ROLLOVER1', 'rollover_n_image.gif', 'rollover_m_image.gif'); 以下がボディ <BODY> <P><A href="#" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1','rollover_n_image.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','rollover_m_image.gif');"><IMG border="0" name="_HPB_ROLLOVER1" src="rollover_n_image.gif"></A></P> </BODY> このswImgの配列は[]の中が数値でないようですが、これは特殊な配列ですか? swImg[imgName] = new Array; どなたか初心者にも分かるように説明していただけるとありがたいです。

  • HPを作成しています。オンマウスオーバーで…

    初心者ですみません。 イラスト集のホームページを作成中です。 サムネイル画像にオンマウスオーバーで大きな画像を表示させるところまでは検索等してできたのですが、同時に「題名」(テキスト)を画像の下などに表示させたいのですが、2つの指示を同時に行う事は不可能でしょうか?そもそもが分かっていないのでヒントでも頂けると助かります。 ちなみに画像は ヘッダーに↓ if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image();movimg[0].src='********.gif'; movimg[1] = new Image();movimg[1].src='******.gif'; movimg[2] = new Image();movimg[2].src='******.gif'; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3){ document.images[imgNoA].src=movimg[imgNoB].src; }; }; ボディーに↓ <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(1,1)"><img src="*****" width="50" border="0"></a> というふうにやっています。