ぱたぱたアニメ館

壁紙の変更

デモ

素材屋でよく見かけると思うのですが、壁紙をクリックしたら背景の壁紙が変わる仕組みです。あれは、JavaScript を使用しています。その作り方です。

基本の実装コード

学習・コピー用に、:hover 時のスタイルなどを除いた最小限の構成（ベースコード）を掲載しています。
以下は、今回使用した壁紙の画像です。

small-03.jpg
03.jpg		 lace1.png
lace1.png		 lace3.png
lace3.png		 lace5.png
lace5.png		 lace6.png
lace6.png

CSS

CSS 

.table1-wrap {
  width:300px;
  margin:0 auto;
  padding:10px 0px;
  background:#fff;
}
.table1 {
  margin:0 auto;
  text-align:center;
  border-collapse: collapse;
}
.table1 td {
  padding: 2px;
}
.table1 img {
  display: block;
}

JavaScript

JavaScript 

<script>
// 1. ページ全体の背景を変える関数
function bgChange(bgN) {
  document.body.style.backgroundImage = "url('" + bgN + "')";
}

// 2. 特定の場所（テーブル等）の背景を変える関数
function setBGImage(img) {
  // 引数imgからsrcを取得して、ID「TB」の背景を書き換える
  document.getElementById('TB').style.backgroundImage = "url('" + img.src + "')";
}

// 3. 元に戻す関数（リロードなし版）
function resetAll() {
  // bodyを元の画像に戻す
  document.body.style.backgroundImage = "url('03.jpg')";
  // テーブルの背景を消す
  document.getElementById('TB').style.backgroundImage = "none";
}
</script>

「03.jpg」は適宜差し替えて使用してください。

HTML

HTML 

<div class="table1-wrap" id="TB">
  <table class="table1">
    <tr>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace1.png'); setBGImage(this.firstElementChild)">
          <img src="lace1.png" height="106" width="106" alt="sample1">
        </a>
      </td>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace3.png'); setBGImage(this.firstElementChild)">
          <img src="lace3.png" height="106" width="106" alt="sample2">
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace5.png'); setBGImage(this.firstElementChild)">
          <img src="lace5.png" height="106" width="106" alt="sample3">
        </a>
      </td>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace6.png'); setBGImage(this.firstElementChild)">
          <img src="lace6.png" height="106" width="106" alt="sample4">
        </a>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <a href="javascript:void(0)" onclick="resetAll()">- 元に戻る -</a>
      </td>
    </tr>
  </table>
</div>

lace1.png、lace3.png、lace5.png、lace6.png は適宜差し替えて使用してください。

ページ全体の背景を変える場合は、onclick 属性内の 「setBGImage(this.firstElementChild)」を削除し、「bgChange('lace*.png'); 」だけを残してください。 （サンプルページ）

特定の場所（テーブル等）の背景を変える場合は、onclick 属性内の 「bgChange('lace*.png'); 」を削除し、「setBGImage(this.firstElementChild)」だけを残してください。 （サンプルページ）

HTML 構造や JavaScript の関数は共通で、削除するのは onclick の中の記述のみです。

全体のサンプルコード

クリックして全てのコードを表示する
Full Code 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
.table1-wrap {
  width:300px;
  margin:0 auto;
  padding:10px 0px;
  background:#fff;
}
.table1 {
  margin:0 auto;
  text-align:center;
  border-collapse: collapse;
}
.table1 td {
  padding: 2px;
}
.table1 img {
  display: block;
}
</style>

<script>
// 1. ページ全体の背景を変える関数
function bgChange(bgN) {
  document.body.style.backgroundImage = "url('" + bgN + "')";
}

// 2. 特定の場所（テーブル等）の背景を変える関数
function setBGImage(img) {
  // 引数imgからsrcを取得して、ID「TB」の背景を書き換える
  document.getElementById('TB').style.backgroundImage = "url('" + img.src + "')";
}

// 3. 元に戻す関数（リロードなし版）
function resetAll() {
  // bodyを元の画像に戻す
  document.body.style.backgroundImage = "url('03.jpg')";
  // テーブルの背景を消す
  document.getElementById('TB').style.backgroundImage = "none";
}
</script>

</head>
<body style="background-image: url('03.jpg');">

<main>

<div class="table1-wrap" id="TB">
  <table class="table1">
    <tr>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace1.png'); setBGImage(this.firstElementChild)">
          <img src="lace1.png" height="106" width="106" alt="sample1">
        </a>
      </td>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace3.png'); setBGImage(this.firstElementChild)">
          <img src="lace3.png" height="106" width="106" alt="sample2">
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace5.png'); setBGImage(this.firstElementChild)">
          <img src="lace5.png" height="106" width="106" alt="sample3">
        </a>
      </td>
      <td>
        <a href="javascript:void(0)" onclick="bgChange('lace6.png'); setBGImage(this.firstElementChild)">
          <img src="lace6.png" height="106" width="106" alt="sample4">
        </a>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <a href="javascript:void(0)" onclick="resetAll()">- 元に戻る -</a>
      </td>
    </tr>
  </table>
</div>

</main>

<footer></footer>
</body>
</html>

03.jpg、lace1.png、lace3.png、lace5.png、lace6.png（2ヶ所ずつ） は適宜差し替えて使用してください。

メモ：JavaScript 記入場所

JavaScript の記入場所は、基本的に 4 つの場所になります。

① <head>～</head>（ヘッダー内）
    ここの例の様にHTML文書の<head>～</head>に記入します。

② <body>～</body>（ボディ内）
    表示する場所に記入します。

③ タグ内
    タグの中に直接 JavaScript を記入します。

④ 外部ファイル
    外部ファイルに記入して呼び出します。（複数のページで同じ JavaScript を使用する時などに）

このページのコードは、Gemini と ChatGPT の協力のもと、古い JavaScript を最新の記述に修正・最適化したものです。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。

上に戻る