新JavaScript例文辞典

背景画像をページが読み込まれるたびにランダムに変更する

説明

背景画像をページが読み込まれるたびにランダムに変更するにはstyleオブジェクトのbackgroundImageプロパティに"url(画像のURL)"の文字列を指定します。この画像のURLを指定する時に、Math.random()によって得られた値を画像のファイル名とします。サンプルの場合はimagesフォルダ内に0.gif、1.gif、2.gifのように番号を付けた画像を入れてあるため、これらがランダムに表示されることになります。また、画像のURLはHTMLファイルがある場所が基準になります。

サンプルプログラム

window.onload = function(){
var ele = document.getElementsByTagName("h1")[0];
var n = Math.floor(Math.random() * 3); // 3枚の画像がある場合
ele.style.backgroundImage = "url(./images/"+n+".gif)";
}
サンプルを実行
[戻る]