初心者のためのホームページ作り　第72号

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

＜第72号＞ 今週のおさらい
　　　　　　　　　　　　　　　　　 毎週金曜日配信　What's New 2003/10/31
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　　　■ JavaScript講座 第14回 --- 背景画像を扱う

◆JavaScript講座 --- 背景画像を扱う

今回の JavaScript講座は、画像、それも背景画像を中心にして解説します。背景画像の入れ替えやスクロールといった、コンテンツとは関係なく動作させるものです。

最初にお断りしますが、Webページで表示する「背景」とは、あくまで「添え物」であり主人公ではありません。メインはそのページで表現するコンテンツです。ここで解説するサンプルでは、その動作を理解しやすくするため誇張しています。その点に十分ご留意してください。

■ 背景画像の入れ替え

通常、一度背景画像を設定すると、入れ替えることができません。しかしながら、JavaScriptでは、あっさりと簡単に入れ替えることができます。

ポイントは、数枚の背景画像となる素材を「配列」として取り込み、時間の経過によって背景画像を取り替えます。

  var myImage=new Array()    //配列を定義する
  document.body.background = 配列変数.src  //指定された画像を表示
　setInterval(関数名,数値)  //タイマーを設定する

つまり、配列によって定義された背景画像が、ある一定の時間が経過すると、画像を取り替えるということを繰り返し実行するスクリプトになるわけです。

なお、背景画像の枚数は、任意に増やすことができます。その際には、配列を定義した後の構文に、対応する画像名を配列変数に取り込むための記述を増やしてください。

背景画像を替えるサンプル　（詳しいJavaScript構文は、今週のマガジン 「第72号」 をお読みください。）

注意点：サンプルでは分かりやすくさせるため、背景画像の内容を誇張しています。実際のご利用では、なるべく類似する画像を作成し、さりげなく変化させるようにしましょう。また、タイマーの時間も長くとるようにすることもポイントです。

さりげない背景画像の変化のサンプル

PageTop

■ 背景画像をスクロールする

次のスクリプトは、背景画像を時間経過と共に下から上にスクロールさせます。

スクロールさせるポイントは、for構文による繰り返し処理と、画像の位置の指定です。

  var n=0;
  function upImage() {
  window.setInterval("banban()",20);
  }
    function banban() {
    n=n+1;
    document.body.style.backgroundPosition="0 -0"+n;
    }

ここでは、繰り返し処理の中で、タイマーが設定されており、0.2秒ごとに画像の垂直位置を増加させてスクロールしているように「見せかけて」います。

なお、初期値として body要素に背景画像を貼り付ける非推奨属性を利用する関係で、文書型定義は「Transitional」を利用します。

背景画像のスクロールサンプル　（詳しい構文は、今週のマガジン 「第72号」 をお読みください。）

PageTop / Home / 目次

Copyright（C） 2002-2003 banban@scollabo.com