WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:チェックボックスで表示切替(フレーム)

0:[投稿] ネピア [2005/02/02 12:42 ][環境:IE6,WIN2000 わからない]

チェックボックスで画像の表示切替はできるのですが、
これをフレーム間でできるようにしたいのですが・・・。
例えば、フレーム1にあるチェックボックスをチェックすると、
フレーム2に画像が表示される…といったことです。
よろしくお願いします。


1:[回答] andi [2005/02/02 16:27 ]

そのソースでフレーム名を指定するようにすれば対応できると思います。


2:[回答] ネピア [2005/02/02 16:32 ]

すいません・・。具体的に
教えていただけませんか。


3:[回答] andi [2005/02/02 17:50 ]

具体的にソースを提示して下さい。


4:[回答] ネピア [2005/02/03 08:41 ]

今は同一フレーム内の処理になってます。
<head>
<script language="JavaScript">
<!--
 function CbV_a() {if(!(cb1.checked)) {
 v1.style.display="none";}else {v1.style.display="";}}
     function CbV_b() {if(!(cb2.checked)) {
     v2.style.display="none";}else {v2.style.display="";}}
// -->
</script>
</head>

<body>
<input type="checkbox" id="cb1" onclick="CbV_a()" onload="CbV_a()"><label for="cb1">画像1を表示</label><br>
<input type="checkbox" id="cb2" onclick="CbV_b()" onload="CbV_b()"><label for="cb2">画像2を表示 </label><br>

 <img src="画像1.gif" id="v1" checked onclick="CbV_a()" onload="CbV_a()" valign="top">
 <img src="画像2.gif" id="v2" checked onclick="CbV_b()" onload="CbV_b()" valign="top">
    </body>

このように書いてます。
これを応用して、フレーム間で操作したいのですが・・・。
無理でしょうか?
andiさんよろしくお願いします。


5:[回答] andi [2005/02/03 10:15 ]

今現在、そのソースで動いているのでしたら、

v1.style.display="none";

などを

parent.フレーム名.v1.style.display="none";

と変えてみて下さい。

つまりイベントを起こしたページを呼び出しているフレーム(parent)上に存在する「フレーム名」のページのv1というオブジェクトに対して処理をする、ということです。

この方法で上手く行けば良いのですが。


6:[回答] ネピア [2005/02/03 11:07 ]

andiさんありがとうございます。
…でもうまくいきませんでした(´д`)

記述は下記のとおりです。

−トップページ−

 <frameset cols="175,*" FRAMEborder=0 FRAMESPACING=0>
         <frame src="チェックボックスのあるページ.html" name="フレームA">
         <frame src="画像を表示させたいページ.html" name="フレームB">
 </frameset>

−フレームAのページ−

 <head>
 <script language="JavaScript">
 <!--
   function CbV_a() {if(!(cb1.checked)) {
   parent."フレームB".v1.style.display="none";}else {parent."フレームB".v1.style.display="";}}
       function CbV_b() {if(!(cb2.checked)) {
       parent."フレームB".v2.style.display="none";}else {parent."フレームB".v2.style.display="";}}
 // -->
 </script>
 </head>

 <body>
 <input type="checkbox" id="cb1" onclick="CbV_a()" onload="CbV_a()"><label for="cb1">チェックボックス1</label><br>
 <input type="checkbox" id="cb2" onclick="CbV_b()" onload="CbV_b()"><label for="cb2">チェックボックス2</label><br>

      <img src="画像1.gif" id="v1" checked onclick="CbV_a()" onload="CbV_a()">
      <img src="画像2.gif" id="v2" checked onclick="CbV_b()" onload="CbV_b()">
 </body>        

−フレームBのページ−
 空のページ

どこかおかしいでしょうか?


7:[回答] andi [2005/02/03 11:33 ]

質問内容を勘違いしていたようです。

「フレームAで選択された画像をフレームBに表示させたい」のでしょうか?

それでしたら
<input type="checkbox" onClick="parent.フレームB.location.href='画像1.gif'">
で行けると思います。


8:[回答] ネピア [2005/02/03 12:01 ]

ありがとうございます!!できました!!
でも、本当にやりたかったのは、フレームBに背景だけの
ページがあって、そのページの背景の上に透過画像を
重ねあわすってことなんです・・・。
すいませんが、教えていただけますか??


9:[回答] andi [2005/02/03 12:19 ]

次の方法を思いつきました。

1.空のページに空の<img>タグを置いておき、上の要領でその<img>タグのsrcを書き換える
2.空のページと見せかけておいて必要な画像を全てdisplay:noneしておき、ネピアさんの要領で表示する
3.空のページにDOMで<img>タグを追加/削除する

1、2は今までの話に加えて、ちょっとだけご自分で調べてみて挑戦されてみて下さい(但し2については汎用性が無いのでお薦めしません)。
3のDOMについてはこのサイトに解説がありますので興味があれば覗くと良いでしょう。

以上で調べてみた上、また分からなければ質問してみて下さい。


10:[回答] ネピア [2005/02/04 10:14 ]

andiさんありがとうございます。
1の方法でやってみたんですけど、うまくいきませんでした…。
(理解できてないのかも…)

DOMはよく分かりませんでした…。
andiさん救いの手をお願しますm(__)m


11:[回答] andi [2005/02/04 10:45 ]

どこまでやってどう上手く行かなかったのでしょうか?
(質問の仕方を覚えましょう。丸投げはやめましょう。)


12:[回答] ネピア [2005/02/04 11:49 ]

すいませんでした・・・。

他のサイトのtipsを参考に

−メイン−
<frameset cols="175,*" FRAMEborder=0 FRAMESPACING=0>
         <frame src="メニューのあるページ.html"  marginwidth="0" marginheight="0" name="menu" noresize>
         <frame src="画像を表示させたいページ.html"  marginwidth="0" marginheight="0" name="map" noresize>
       </frameset>


−メニューのあるページ−
<head>
<script language="JavaScript">
<!--
 function img(image) {
 window.parent.map.window.document.images["img1"].src=image;}
// -->
</script>
</head>
<a href="Javascript:onClick=img('youto.gif')">画像1</a><br>
<a href="Javascript:onClick=img('gairo.gif')">画像2</a><br>


−画像を表示させたいページ−
<img src="画像1.gif" name="img1" style="margin-top:100px;">

としたんですけど…。
これだと、メニューページの文字をクリックで画像が切り替わってしまいます。
なんとか、チェックボックスに置き換えたいんですけど、どうしていいか分からなくて・・・。
画像を切替えじゃなくて、重ね合せにしたいんです。。。
すいません。。。


13:[回答] andi [2005/02/04 14:00 ]

> 画像を切替えじゃなくて、重ね合せにしたいんです

が>>8の「そのページの背景の上に透過画像を重ねあわす」を意味しているのであれば、
画像を表示させたいページの<body>タグなどの背景画にその画像を指定すれば良いと思います。

> チェックボックスに置き換えたいんですけど

>>7の方法を使えば対応できると思います。
今までの情報をうまく組合わせてみて下さい。


以上で私が勘違いしているようでしたら、もう一度要望を整理して投稿して頂けませんか?


14:[回答] を [2005/02/10 20:06 ]

−メニューのあるページ−
<html>
<head>
<script language="JavaScript">
<!--
function img1() {
 if(document.all.check1.checkd == ture) {
  parent.map.document.all.image1.innerHTML = "<img src='youto.gif'>";
 } else {
  parent.map.document.all.img1.innerHTML = "";
 }
}
function img2() {
 if(document.all.check2.checkd == ture) {
  parent.map.document.all.image2.innerHTML = "<img src='gairo.gif'>";
 } else {
  parent.map.document.all.img2.innerHTML = "";
 }
}
// -->
</script>
</head>
<body>
<input type="checkbox" name="check1" onclick="img1()">画像1<br>
<input type="checkbox" name="check2" onclick="img2()">画像2<br>
</body>
</html>

−画像を表示させたいページ−
<html><head></head>
<body>
<div id="image1" style="top: 100px; left: 100px; position : absolute;"></div>
<div id="image2" style="top: 100px; left: 100px; position : absolute;"></div>
</body>
</html>

こんな感じでうまくいくのかな?
やりたいことと違ってたらすみません。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World