背景画像の設定方法

背景画像を設定するには、次の２つの方法があります。

  1. body タグの属性を使い、<body background="BACK1.jpg"> と指定する方法。
  2. CSS を使い、body { background-image: url("BACK1.jpg"); } と指定する方法。

背景画像の変更方法

上のどちらの方法で背景画像が指定されているかによって、javascript の書き方が変わります。

1. の方法で表示されている場合は、次のような関数を作ればよいでしょう。 bg-1.html 参照

function bgImg(image1) { document.body.background = image1; }

この関数を呼び出すには、
<input type="button" value="変更する" onClick="bgImg('BACK2.jpg')">
とします。

2. の方法で表示されている場合は、次のような関数を作ればよいでしょう。 bg-2.html 参照

function bgImg(image1) {
    var str1 = "url('" + image1 + "')";
    document.body.style.backgroundImage = str1;
}

この関数を呼び出すには、
<input type="button" value="変更する" onClick="bgImg('BACK2.jpg')">
とします。

即ち、1. の場合には属性の値の変更をすればよく、2. の場合にはスタイルの変更を行う必要があります。
タグの属性で指定したものより、スタイルで指定したものほうが優先されるため、このような注意が必要になります。
スタイルの変更方法は、少々難解で上級者クラスですが、是非この方法を覚えることに努めてください。

トップページへ
inserted by FC2 system