壁紙の変更

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

サンプル

wallpaper change sample image1 wallpaper change sample image2
wallpaper change sample image3 wallpaper change sample image4
* 元に戻る *

 <head>~</head>に以下のJavaScriptのソースを組み込みます。

<SCRIPT language="JavaScript"> <!-- function bgChange(bgN) { document.body.background = bgN; } //--> </SCRIPT>

 <body>~</body>に以下のソースを組み込みます。

ここでは元の雲の壁紙をベースにして4枚の壁紙を展示し、それをクリックすることによってbody全体の壁紙を変更させます。 (壁紙の画像は、テーブルに入れて展示しています。)

<table width="212"> <tr> <td><a href="javascript:bgChange('lace1.png')"> <img src="lace1.png" width="106" height="106" alt="" border="0"></a></td> <td><a href="javascript:bgChange('lace3.png')"> <img src="lace3.png" width="106" height="106" alt="" border="0"></a></td> </tr> <tr> <td><a href="javascript:bgChange('lace5.png')"> <img src="lace5.png" width="106" height="106" alt="" border="0"></a></td> <td><a href="javascript:bgChange('lace6.png')"> <img src="lace6.png" width="106" height="106" alt="" border="0"></a></td> </tr> <tr> <td colspan="2" align="center"><a href="javascript:location.reload();">* 元に戻る *</a></td> </tr> </table>

<a href="javascript:location.reload();">* 元に戻る *</a>
「* 元に戻る *」をクリックすると元に戻ります。

<a href="javascript:bgChange('lace1.png')">
のlace1.pngが変更する壁紙の指定です。<img>タグで展示する壁紙の画像を張り、<a>タグで変更する壁紙へジャンプさせています。

<img src="lace1.png" width="106" height="106" alt="" border="0">
が壁紙の画像を展示するタグ。(lace1.pngは壁紙の画像、widthは画像の横幅、heightは画像の縦)

 今回使用した壁紙の画像はこちら

small_03.jpg
元の画像
lace1.png
lace1.png
lace3.png
lace3.png
lace5.png
lace5.png
lace6.png
lace6.png

全体のサンプルソース

<html> <head> <title>タイトル</title> <script language="JavaScript"> <!-- function bgChange(bgN) { document.body.background = bgN; } // --> </script> </head> <body background="03.jpg"> <table width="212"> <tr> <td> <a href="javascript:bgChange('lace1.png')"> <img src="lace1.png" width="106" height="106" alt="" border="0"> </a> </td> <td> <a href="javascript:bgChange('lace3.png')"> <img src="lace3.png" width="106" height="106" alt="" border="0"> </a> </td> </tr> <tr> <td> <a href="javascript:bgChange('lace5.png')"> <img src="lace5.png" width="106" height="106" alt="" border="0"> </a> </td> <td> <a href="javascript:bgChange('lace6.png')"> <img src="lace6.png" width="106" height="106" alt="" border="0"> </a> </td> </tr> <tr> <td colspan="2" align="center"> <a href="javascript:location.reload();">* 元に戻る *</a> </td> </tr> </table> </body> </html>

 メモ:JavaScript記入場所

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

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

② <body>~</body>(ボディ内)
    表示する場所に記入します。

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

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

上に戻る