- ベストアンサー
画像の固定について
ホームページをＴＡＧにより作成しています。 閲覧するときにスクロールをしますが、その画面上たとえば最上部にバナーのようなものをおいて、スクロールしても常に画面上で見れることはできますか。 検索ですと「背景画像の固定」は、たくさんありますが、 単なる画像の固定というのがなかなかみつかりません。 このうち上に固定というのでためしてみたら、スクロールした場合、そのバナーがうしろに行ってしまい見えなくなってしまいました。 使用方法は、画面いっぱいに画像を表示させ、小さなバナーで「画像をクリックしてください」というのをおきたいのです。 一定のところにおくと、画像をスクロールさせて場合見えなくなってしまうのでこれを常に見えるようにしたいのです。 よろしくお願いします。
- noro6857
- お礼率88% (526/596)
- ホームページ作成ソフト
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
比較的カンタンにできますよ。 例えば以下のとおり。 <html> <head> <script language="JavaScript"> <!-- offX = 10; // ←画面左隅からの初期表示位置 offY = 10; // ←画面上隅からの初期表示位置 function movBox(){ mx = document.body.scrollLeft; // ←画面スクロール値を取得 my = document.body.scrollTop;// ←画面スクロール値を取得 box.style.left= mx + offX; // ←画面スクロールにあわせて[box]を移動 box.style.top = my + offY; // ←画面スクロールにあわせて[box]を移動 } // --> </script> </head> <body onScroll="movBox()"><!-- ← スクロールされるたび、JSで定義した関数を実行 --> <div id="box" style="position:absolute;top:10px;left:10px;"> <!--↓ここにバナーを入れる--> <a href="http://www.google.co.jp" target="_blank"><img src="http://www.google.com/images/logo_sm.gif" width="150" height="55" border="1"></a> <!--↑ここにバナーを入れる--> </div> <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） <br>テキストや画像などページの内容（ダミー） </body> </html>
その他の回答 (1)
- htx2005
- ベストアンサー率25% (22/87)
レイヤーを常に同じポジションで表示させるということでしたら 以下にあるＪＡＶＡスクリプトが参考になるかも知れません。 ご参考までに http://mugi.cc/muginavi/sample/mn_vertical.htm
お礼
サイト紹介ありがとうございました。 これもおもしろそうなので、ほかの目的で利用できそうです。 よく勉強させていただきます。
お礼
さっそくご指示の方法で試してみました。 おかげさまで目的どおりのことができました。 どうもありがとうございました。 カンタンといわれてもscriptの知識がないので、ソースを書いていただき助かりました。