ActiveDesktop_03

Last-modified: 2014-08-16 (土) 12:41:50 (1987d)

ActiveDesktop_02

壁紙チェンジャーを作成する

03_01.png

構成

Active Desktop のインデックスファイル index.html のあるフォルダに background というフォルダを作成し、その中に壁紙ファイルを入れます。

ついでに、壁紙変更用のスクリプトファイルもこのフォルダの中に入れます。→以下、background.js

そして、index.html内で background/background.js をインクルードすることで壁紙を変更します。

スクリプトファイルの作成

JavaScript?のみではサーバにあるファイル一覧を自動取得するのは大変だと思うので、私はbackground.jsに壁紙ファイル名をハードコーディングしました。

background.jsを include フォルダではなく background フォルダに入れたのはこのため(以後の編集を容易にするため)です。

PerlやPHP等のサーバサイドでのプログラムが動くwebサーバ上からActiveDesctop?のファイルを取得する場合、ファイル一覧の列挙はサーバサイドのプログラムに任せれば簡単です。

background.js

//index.htmlから見た背景用フォルダ
var dirBackground = "background/";

//背景ファイルを配列で列挙
var aryBackGround = new Array(
	"bg01.png",
	"bg02.png",
	"bg03.png"
);

function changeBackground(){
	var b = Math.floor(Math.random() * aryBackGround.length);
	document.body.style.backgroundImage="url("+dirBackground+aryBackGround[b]+")";
}

changeBackground();

壁紙ファイルを配列で列挙し、body.style.backgroundImageに代入しているだけです。

後にchangeBackground();を実行することで、壁紙を変更することができます。setIntervalでタイマー化しても良いでしょう。

動作サンプル

動作サンプル (IE(Trident)でないと正常表示できません)

応用

番外編02 グラデーション背景色チェンジャーを作成する

背景画像を変更する変わりに、背景のグラデーションカラーを変更するようにしてみました。