Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 背景の画像を上にスクロールする

IE5.0以降のみ(Macintosh版IE5.0では正しく表示されない場合があります)

ページの背景画像の表示位置を一定の間隔で変更することで、背景がスクロールしているような効果を与えることができます。ここでは、VB Scriptを使って、背景画像が上に上っていくようにスクロールさせる方法を考えてみましょう。

■ 関数を実行するタイミングの設定

ページの読み込みが完了した時のイベントを使って、背景の画像を切り替える関数の呼び出しを設定します。

<BODY BACKGROUND="../../assets/images/bg3-1.jpg" onLoad="bganimation()>

■ 背景画像を切り替える関数の設定

JAVA Scriptを使って4枚の背景画像を順番に切り替えて表示する処理を設定します。
<SCRIPT LANGUAGE="JavaScript">
<!--
var no=1;
function bganimation(){
document.body.background="../../assets/images/bg3-"+no+".jpg";
no++;
if(no>=5)
{
no=1;
}
window.setTimeout("bganimation()",150);
}
//-->
</SCRIPT>

画像を切り替える時間間隔は、1000分の1秒単位で指定します。
例では、4枚の背景画像を切り替えて表示することで、背景をアニメーション表示しています。このスクリプトでは、関数が呼び出された回数を変数「no」を使ってカウントし、背景に表示するファイルを切り替えています。この時「bg3-1.jpg」「bg3-2.jpg」のように連番の名前がついている画像ファイルを変数「no」を使って「"bg3-"+no+".jpg"」のように設定しておくのがポイントです。この設定で、変数「no」の値が「1」の場合「bg3-1.jpg」という名前のファイルを表示することができます。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box