• ベストアンサー

画像の固定について

ホームページを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

  • Dreamweaberでの背景画像固定について

    よくこちらにも質問にあがってる「背景画像」の固定ですが、回答を拝見していると、手打ちタグでの回答ばかりですよね? 同じタグをDreamweaberで手打ち挿入してみましたが、背景固定は出来ませんでした。 (右下・左上等全部やってみましたが、どれも出来ませんでした) 画面をスクロールすると文字と一緒に画像も動いてしまいます。 手打ち挿入でなく、Dreamweaberのソフト上では出来ないものなのでしょうか? 詳しい方いらっしゃいましたら回答お願いいたします。 こちらの環境はi Mac/OS.9.2.2です。

    • ベストアンサー
    • HTML
  • 縦長の画像をスクロール、背景固定

    Wordpress Stinger5を使っています。 トップページの高さが3000px 画像の高さが1500pxです。 この画像を背景にし、ページの上部に表示し、 下にスクロールして、背景画像が途ぎれるときに 背景が画像が固定する方法が知りたいです。

    • 締切済み
    • CSS
  • 背景として画面の上下に画像を固定。

    この方のホームページでの質問ですが、 http://yuki930.v-colors.com/ 背景として、 上下に雲の画像を固定して、中をスクロールできるようになっていますが、 このように、上下の画像を画面に固定するには、どのようにcssを編集すれば良いのでしょうか? 宜しくお願いします。

    • ベストアンサー
    • CSS
  • フッターを固定して、常にどのページでも常に表示

    フッターを固定して、常にどのページでも常に表示させる方法について。 今、FC2様の方で、ホームページを作成しているのですが、 フッターを固定して、そのフッターの内容を 常にどのページでも表示させるようにしたいのですが、 (付属の画像のようなスクロールしても常に画面下に表示されるもの) なのですが、 タグ初心者でどのようにすればいいのかよく解りません。 タグはどのようなものが解りやすく出来ますでしょうか? 後、タグの意味も教えていただけると嬉しいです。 回答宜しくお願い致します。

  • ホームページ作成で画像の固定が上手く出来ません

    画像の固定方法がよくわかりません。 ホームページで1024×768サイズの画像を 背景にしようと思います、 しかし、画像のサイズに、テキスト文章が収まりません、 横はよいのですが、縦はがだめです、 ホームページビルダー 6.5で作成しておりますが、 ディスプレイサイズは、1024×768サイズで作成しております 画像の設定メニューで、画像を固定してしまうと、 作成したテキスト文章の背景画像に入りきならない部分が、 背景が真っ白になったり、 拡大固定?されたような感じになり、 テキストはスクロールするのですが 背景に指定した画像が部分的に大きくなってしまい、 全部の背景が表示できなかったりします。 画像を垂直で繰り返すにしてしまいますと、 画像の切れ目があからさまにでてしまい不自然になってしまいます。 画像サイズ&ディスプレイサイズが、1024×768設定で、 テキストだけがスクロールするように、表示したいです。 よろしくお願い致します。

  • 背景画像を固定

    CSSで背景画像を右側に固定しているのですが、 IE5.5で見るとスクロールがある場合と無い場合で 画像の位置がずれてしまいます。 これは仕様なのでしょうか? 直す方法はありませんか?

    • ベストアンサー
    • HTML
  • 画像を固定+位置の指定

    ホームページを作っています。初心者です。 プロフィールのページで背景を固定して自分の写真をその上に固定して画面の真ん中入れて、プロフィールを書きたいのですが(スクロールすると背景と自分の写真の上をプロフィールの文字が流れる感じ)、背景を固定できても自分の写真を固定することと真ん中に表示できません。 分かりづらい文章ですみませんが、ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 背景画像の固定のようにテキストも固定させる方法を教えて下さい。

    背景画像を固定して スクロールバーを動かしても背景が動かないようにする小技は実践できたのですが、 その画像の下にリンク先を表示する枠を設け、画像と同じように背景として固定させたいのですのですが、 その設定の仕方が分かりません。 宜しくご教授下さい。

  • Firefoxで背景固定したいのですが

    同様の質問が既出かと検索したのですがなかったようなので質問させていただきます。 タグ打ちでhtmlファイルを作ってホームページを作っています。 今までマッキントッシュ―IEでしか確認できなかったのですが、つい先日ウィンドウズ―Firefoxを導入することができました。 その際にわかったのですが、IEでは背景を固定して文字だけスクロールすることができているのですが、Firefoxですと文字と一緒に背景も繰り返しスクロールしてしまいます。 Firefoxでも背景を固定できるタグがないものかとネット上を調べてもみたのですが、どうもよくわかりません。 なにかよい手段をご存じのかた、お知恵を貸していただけますとうれしいです。 よろしくお願いいたします。

  • ホームページの背景固定

    ページの背景に画像を置いて固定し、文字だけがスクロールするようにしたいのですが、どのようにしたら良いのでしょうか。 ホームページビルダー7を使っています。

専門家に質問してみよう