イヌでもわかるJavaScript講座

【リスト】

<body onload="myCheck()">

<SCRIPT language="JavaScript"><!--
myOP = window.opera;            // OP
myN6 = document.getElementById; // N6
myIE = document.all;            // IE
myN4 = document.layers;         // N4
if      (myOP) myBR="O6"; // ブラウザは OP6以上
else if (myIE) myBR="I4"; // ブラウザは IE4以上
else if (myN6) myBR="N6"; // ブラウザは NS6以上
else if (myN4) myBR="N4"; // ブラウザは NN4
else           myBR="";   // ブラウザは 分からん

myIconX = 88; // 画像のXサイズ
myIconY = 31; // 画像のYサイズ

function myCheck(){
  if ( myBR != "" ){     // 対応可能ブラウザか？
    if (myBR == "O6"){
      myObj = document.getElementById("myBanner").style;
    }else if (myBR == "N6"){
      myObj = document.getElementById("myBanner").style;
    }else if(myBR == "I4"){
      myObj = document.all["myBanner"].style;
    }else if(myBR == "N4"){
      myObj = document["myBanner"];
    }
    myMain();            // 対応ブラウザなので実行する。
  }
}

function myMain(){
  if (myBR=="I4"){
    myObj.left = document.body.scrollLeft + document.body.clientWidth - myIconX;
    myObj.top  = document.body.scrollTop  + document.body.clientHeight - myIconY;
  }else if (myBR=="N6" || myBR=="O6" || myBR=="N4"){
    myObj.left = pageXOffset + innerWidth - myIconX;
    myObj.top  = pageYOffset + innerHeight - myIconY;
  }
  setTimeout("myMain()",300); // ものすごいスピードでバナーを右下に再描画させる
}
// --></SCRIPT>

<!-- 画像タグ -->
<div ID="myBanner" STYLE="position:absolute">
<img src="../image/link1.gif" width="88" height="31">
</div>

<SCRIPT language="JavaScript"><!--
myOP = window.opera;            // OP
myN6 = document.getElementById; // N6
myIE = document.all;            // IE
myN4 = document.layers;         // N4
if      (myOP) myBR="O6"; // ブラウザは OP6以上
else if (myIE) myBR="I4"; // ブラウザは IE4以上
else if (myN6) myBR="N6"; // ブラウザは NS6以上
else if (myN4) myBR="N4"; // ブラウザは NN4
else           myBR="";   // ブラウザは 分からん

myIconX = 88; // 画像のXサイズ
myIconY = 31; // 画像のYサイズ

<div ID="myBanner" STYLE="position:absolute">
<img src="../image/link1.gif" width="88" height="31">
</div>

【説明】

Ｑ：「某無料HPサービスのホームページでは、画面をスクロールさせても、右下にロゴが固定表示されていますが、あれも JavaScript ですか？」
Ａ：「たぶん。(^^; おそらく、DHTMLでしょう。短いリストでできそうなので、久しぶりにＤＨＴＭＬを使ってみましょうか。。」

基本的なプログラムの流れは、Ｓｔｅｐ．４４～４７と同じです。その枠に埋め込んでみます。

DHTML（DOM）なので、IE4、NN4、OP6以上でないと動きません。

<BODY>タグの onload にてページが全てロードされた後にmyCheck() にて対応ブラウザのチェックをしました。対応していれば、myMain()を実行します。未対応であれば myMain() は実行されず、バナーも挿入した位置に表示されたままになります。（ブラウザチェックは、Step.82を参照）

myMain( ) の中身はというと、<DIV>タグ内で表示したリンクバナーを右下の座標に変更(移動) させます。それを、永遠にグルグルやっていれば、あたかも右下に固定されたように見えるのでは。。無謀ですか。。 (^^;

右下の座標を求める手段として、スクロール位置＋ウィンドウサイズ－画像サイズとしました。（座標取得は、Step.93を参照）
サンプルのリンクバナーは、88 x 31 のサイズです。

えー、説明は以上です。。(^^; なぜ、これだけか！最初はとても親切に書いていたんだけど、FrontPageExpressが保存する前に爆発して消えてなくなったのさ。(ToT)

【ご注意を】
FrontPageExpressは、TABLEタグ内に、さらにTABLEタグをいれて、その中で、IMEで漢字変換すると爆発ちゅど～んとなります。

また、今回のサンプルのような、DIVタグを作ると、FrontPageExpress は、親切にPタグに置き換えてくれます。HPエディタを買うお金がない人は、テキストエディタ等で書くしかないっす。

<div ID="myBanner" STYLE="position:absolute">
<img src="../image/link1.gif" width="88" height="31">
</div>

↓　FrontPageExpressで保存すると・・・

<p>
<img src="../image/link1.gif" width="88" height="31">
</p>

ちゅど～ん Σ(￣▽￣;)

サンプル画像

88 x 31

参考ステップ
Ｓｔｅｐ．８２　右クリックを禁止してみましょう
Ｓｔｅｐ．９３　画像をビリヤード風に動かして見ましょう