Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.74 - 画面右下にロゴイメージを表示する


画面右下にバナーロゴを固定表示してみます。


Step テーマ
● document.body.clientWidth クライアント領域の幅(ピクセル)
● document.body.clientHeight クライアント領域の高さ(ピクセル)
● window.innerWidth クライアント領域の幅(ピクセル)
● window.innerHeight クライアント領域の高さ(ピクセル)
● document.body.scrollLeft 水平スクロールされているピクセル数
● document.body.scrollTop 垂直スクロールされているピクセル数
● window.pageXOffset 水平スクロールされているピクセル数
● window.pageYOffset 垂直スクロールされているピクセル数

実行例


画面右下にいるやつです


リスト


<SCRIPT type="text/javascript"><!--
myBannerWidth = 88;// 画像の幅(ピクセル)
myBannerHeight = 31;// 画像の高さ(ピクセル)
 
function myMain(){
myObj = document.getElementById ( "banner" ).style;
myObj.left = document.body.scrollLeft + document.body.clientWidth - myBannerWidth;
myObj.top = document.body.scrollTop + document.body.clientHeight - myBannerHeight;
}
// --></SCRIPT>
<DIV id="banner" style="position:absolute"><IMG src="../image/link1.gif" width="88" height="31"></DIV>
<SCRIPT type="text/javascript"><!--
setInterval( "myMain()", 300 );
// --></SCRIPT>


サンプルだけの HTMLは こちらへ

説明


[Ｑ] 某ホームページで、画面をスクロールさせても、右下にロゴが固定表示されていますが、あれも JavaScript ですか？
[Ａ] Step.39 を応用すれば 作れそうです。
要するに、右下の座標(X,Y) から、自分のロゴのサイズを引いた位置に 表示すればよい ってことなので、

ロゴを用意して、
<DIV id="banner" style="position:absolute"><IMG src="../image/link1.gif" width="88" height="31"></DIV>

右下の座標。
画面の幅(ピクセル) : document.body.clientWidth
画面の高さ(ピクセル) : document.body.clientHeight
 ほかにも、
画面の幅(ピクセル) : window.innerWidth
画面の高さ(ピクセル) : window.innerHeight
 がありますが、こちらはスクロールバーの外側のサイズなのと、IE8以下が未対応なので 上を使います。

画面がスクロールされているか。
水平スクロール位置(ピクセル) : document.body.scrollLeft
垂直スクロール位置(ピクセル) : document.body.scrollTop
 ほかにも、
水平スクロール位置(ピクセル) : window.pageXOffset
垂直スクロール位置(ピクセル) : window.pageYOffset
 がありますが、IE8以下が未対応なので 上を使います。

これで、右下の座標が割り出せました。
これに、自分のロゴのサイズを引いたところに 表示しましょう。
myObj = document.getElementById ( "banner" ).style;
myObj.left = document.body.scrollLeft + document.body.clientWidth - myBannerWidth;
myObj.top = document.body.scrollTop + document.body.clientHeight - myBannerHeight;

表示しただけなら、そのあとに、ウィンドウを広げたり、縮めたり、スクロールしたりされると ダメダメなので、
いつもの setInterval でグルグルと 再描画させます。
setInterval( "myMain()", 300 );


参考ステップ
Step.39 「只今ホームページ読込中！」メッセージを表示してみましょう
Step.93 画像をビリヤード風に動かして見ましょう
Step.94 ダブルクリックでフローティングメニューを表示してみましょう
▲TOP


 
イヌでもわかるJavaScript講座 お品書き へ戻ります
▲TOP