堀北真希うさぎ
主な作品
人気女優をモデルにした制作者の創作キャラクタのイラスト例とアニメーション動画

ページ案内▼

背景画像を時刻に依って撰ぶ。

背景画像を時刻に依って撰ぶ・目次。

背景画像を時刻に依って撰ぶスクリプトについて。

ここでは、端末の時計が奇数秒か偶数秒かに依って背景画像を切替えています。

背景画像を時刻に依って撰ぶスクリプトのサンプル。

スクリプトを実行出来るCSS対応環境なら、以下のリンク先のページは開いた時刻に依って二通りの背景画像のどちらかが表示されます。リロードしてみて、確かめて下さい。

実行出来ない環境か、CSS非対応環境ではリンク先には背景画像は表示されません。

一つ目の背景画像
荒目の緑のチェック模様です。
二つ目の背景画像
細か目の緑のチェックです。

背景画像を時刻に依って撰ぶスクリプトのソース。

背景画像を時刻に依って撰ぶ機能を実現するスクリプト「BGImage.js」は以下の通りです。

now=new Date();
i=now.getSeconds();
img='http://www.marguerite.jp/Nihongo/WWW/BGImage1.GIF';
if ((i & 1)==0) {
    img='http://www.marguerite.jp/Nihongo/WWW/BGImage2.GIF';
    }

if (document.layers || document.all && !window.opera && document.compatMode!='CSS1Compat') {
    document.write('<style type="text/css"> body { background: url("'+img+'") #cfd repeat top left scroll; } </style>');
    }
else if (document.all || document.getElementById) {
    document.write('<style type="text/css"> html, body { background: url("'+img+'") #cfd repeat top left scroll; } body, body * { background: transparent; } </style>');
    }

背景画像を時刻に依って撰ぶスクリプトの流れ。

背景画像を時刻に依って撰ぶスクリプトの流れは、以下のようになります。

  1. まず、時刻を取得し、秒が偶数か奇数かに依って画像のURLを選択します。
  2. 続いて、選択した画像のURLを<html>要素の背景画像とし、<body>要素とその下位要素の背景を無色透明にする様なCSS定義をHTMLに書出します。すなわち、以下の<style>要素をHTML文書に書き出します。 
    <style type="text/css"> html { background: url(画像URL) #cfd repeat top left scroll; } body, body * { background: transparent; }</style>

    要するに、スタイルの定義を<style>要素で強制的に上書きする訳です。

他に注意すべき事。

CSSについてはブラウザの実装に依って大きく異なり、特にインターネットエクスプローラの一部環境やネットスケープ 4.xでは背景画像の定義方法が異なります。

具体的にはインターネットエクスプローラの一部とネットスケープ 4.xでは、<html>要素へのスタイル定義が無効となります。

このため、これらの環境に対しては、以下のように<body>要素の背景画像を指定する必要があります。

<style type="text/css"> body { background: url(画像URL) #cfd repeat top left scroll; }

時刻を取得する処理。

背景画像を時刻に依って撰ぶのですから、当然時刻を取得する処理が必要になります。

時刻を取得する処理は、以下のようになります。

now=new Date();
i=now.getSeconds();

時刻を取得する処理の説明。

Date型オブジェクトnowから秒の値を取出します。オブジェクト変数から値をメソッドを通じて取り出す場合は

変数名=オブジェクト変数名.メソッド名(引数)

とする事で左辺の変数に特定の値を得る事が出来ます。

画像のURLを選択する処理。

img='http://www.marguerite.jp/Nihongo/WWW/BGImage1.GIF';
if ((i & 1)==0) {
    img='http://www.marguerite.jp/Nihongo/WWW/BGImage2.GIF';
    }

画像のURLを選択する処理の説明。

まず変数imgに秒数が奇数の場合の画像URL「http://…/BGImage1.GIF」を入れておきます。続いて偶数ならそのURLを「http://…/BGImage2.GIF」に書換えます。

ここで条件式の「(変数 & 1)==0」は変数が偶数である場合に真になります。奇数の場合に真になるようにしたい場合は「(変数 & 1)!=0」とします。

CSS定義をHTMLに書出す処理。

if (document.layers || document.all && !window.opera && document.compatMode!='CSS1Compat') {
    document.write('<style type="text/css"> body { background: url("'+img+'") #cfd repeat top left scroll; } </style>');
    }
else if (document.all || document.getElementById) {
    document.write('<style type="text/css"> html, body { background: url("'+img+'") #cfd repeat top left scroll; } body, body * { background: transparent; } </style>');
    }

CSS定義をHTMLに書出す処理の説明。

条件式は「CSS対応環境であれば…を実行せよ」と言う意味になります。CSS対応環境ではdocument.layers，document.allまたはdocument.getElementByIdのいずれかのオブジェクトを実装しています。その実装が確認出来ればCSS対応環境と判断出来ると言う訳です。

そして、その条件が満たされたらdocument.write()メソッドで先ほど選択した画像を背景画像とするようなCSS定義を書出すと言う訳です。

参考：CSS非対応環境で背景画像を切替えるには。

実は、CSS非対応環境でも背景画像を切変える事は可能です。但し、そのやり方は非常に好ましくないものです。

具体的にはこのスクリプトの後方に以下のように追加します。

else {
    document.write('<body background="'+img+'" bgcolor="背景色コード">');
    }

CSS非対応環境で背景画像を切替える処理の説明。

追加した処理は「CSS非対応のブラウザには<body>要素の開始タグを書足す」と言うものです。現行の規格では排除勧告(deprecated)が出ているのですが、<body>要素にbgcolor属性を付ける事で背景色を、background属性で画像URLを指定する事で背景画像を表示出来ると言うものです。

このとき注意したい事は以下の通りです。

一応方法があるので書いておきましたが、PC向けのブラウザではCSS対応ブラウザが四捨五入すれば100%のシェアを持つ今日では、問題が多い割には実りの無いものと言えるでしょう。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com