• ベストアンサー

画像の固定について

ホームページをTAGにより作成しています。 閲覧するときにスクロールをしますが、その画面上たとえば最上部にバナーのようなものをおいて、スクロールしても常に画面上で見れることはできますか。 検索ですと「背景画像の固定」は、たくさんありますが、 単なる画像の固定というのがなかなかみつかりません。 このうち上に固定というのでためしてみたら、スクロールした場合、そのバナーがうしろに行ってしまい見えなくなってしまいました。 使用方法は、画面いっぱいに画像を表示させ、小さなバナーで「画像をクリックしてください」というのをおきたいのです。 一定のところにおくと、画像をスクロールさせて場合見えなくなってしまうのでこれを常に見えるようにしたいのです。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • soons
  • ベストアンサー率54% (17/31)
回答No.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>

noro6857
質問者

お礼

さっそくご指示の方法で試してみました。 おかげさまで目的どおりのことができました。 どうもありがとうございました。 カンタンといわれてもscriptの知識がないので、ソースを書いていただき助かりました。

その他の回答 (1)

  • htx2005
  • ベストアンサー率25% (22/87)
回答No.1

レイヤーを常に同じポジションで表示させるということでしたら 以下にあるJAVAスクリプトが参考になるかも知れません。 ご参考までに http://mugi.cc/muginavi/sample/mn_vertical.htm

noro6857
質問者

お礼

サイト紹介ありがとうございました。 これもおもしろそうなので、ほかの目的で利用できそうです。 よく勉強させていただきます。

関連するQ&A

専門家に質問してみよう