2 返信 最新の回答 日時: Feb 13, 2008 1:17 AM ユーザー:(tetsu)

    フローティングボックスをテーブルの相対位置に固定する

    Level 1
      OSXでGolive6を使っています。

      フローティングボックスのなかにメニューをいれて
      画面の右上に常に置きたいと思っています。
      ただし、このフローティングボックスの位置を
      ブラウザ画面でなく、あるテーブルに対して固定したいのです。
      そのテーブルは、W700pxでブラウザのセンターに表示
      されるようにしておきます。

      つまりブラウザのウインドを横に広げると
      背景画像の中のセンターにW700pxのテーブルがあり
      そのテーブルの右上端にメニューが表示される
      画面をスクロールすると テーブルの右端に
      沿ってメニューも移動する そんな感じです。

      ヘッダアクション_フロートレイヤー は
      ブラウザに対する相対位置設定しかできませんよね。

      可能でしょうか?
        • 1. Re: フローティングボックスをテーブルの相対位置に固定する
          Level 1
          tetsuさん、
          今晩は。
          他の方法があるかもしれませんが、私は、FlashのSWFをメニューにして、同じようなことを、javascriptで行います。
          <head></head>の間に、以下のjavascriptを記載し、
          <html>
          <head>
          <script tyep="text/javascript">
          <!--
          function followScroll(){//Browserの幅が変わっても、id="link"というレイヤーをブラウザーの中心に位置させ、スクロールに合わせて、縦方向に移動させる。

          if(document.getElementById){//IE5.X以降、Netscape6.X以降に対応
          linkObj = document.getElementById("link");
          linkW = linkObj.width; // link idの横幅
          wW = document.body.clientWidth; // ウィンドウの横幅
          sy = document.body.scrollTop; //縦方向のスクロール量が格納される
          cx = (wW - linkW) / 2;//ウインドウ幅とこのlink幅の差を1/2として、ウインドウの中心値を計算
          linkObj.style.left = cx;//その中心値を、linkObjのX座標に代入、
          linkObj.style.top=sy;//縦方向のスクロール量をlinkObjに代入
          setTimeout("followScroll()",100)//FlashのenterFrameに相当し、常時繰り返します。100の意味は、1/1000秒×100=1/10= 0.1秒に一回、followScroll()を繰り返します。

          } else if(document.all) {//IE4.Xに対応
          linkObj = document.all("link");
          linkW = linkObj.width;
          wW = document.body.clientWidth;
          sy = document.body.scrollTop;
          cx = (wW-linkW)/2;
          linkObj.style.left = cx;
          linkObj.style.top=sy;
          setTimeout("followScroll()",100)

          } else if(document.layers) {//Netscape4.Xに対応
          linkObj = document.layers["link"];
          linkW = linkObj.width;
          wW = document.body.clientWidth;
          sy = document.body.scrollTop;
          cx = (wW-linkW)/2;
          linkObj.style.left = cx;
          linkObj.style.top=sy;
          setTimeout("followScroll()",100)
          }
          }
          // -->
          </script>
          </head>
          <body onload="followScroll()" bgcolor="#ffffff">

          <div id="link" width="×××">
          このレイヤーの上に、該当するobjectを配置する。
          </div>
          </body>
          </html>

          この例は、ブラウザーの幅が変わっても、いつも中心に位置し、ブラウザーのスクロールアップ、ダウンに追従して、上下する例ですが、パラメーターを工夫すれば、テーブルとの関係も固定化できて いるように見せることが出来ると思います。
          タグが効くとまずいので、全角で記載してますから、コピペでは動きません。
          いろいろ、パラメーターを変えて、試してみてください
          • 2. Re: フローティングボックスをテーブルの相対位置に固定する
            Level 1
            >joyさん
            お返事遅れました ありがとうございます。
            おもしろいです 今度やってみます。