ぱたぱたアニメ館サンプル
) |
) |
) |
) |
| * 元に戻る * | |
<head>～</head>に以下のJavaScriptのソースを組み込みます。
<SCRIPT language="JavaScript">
<!--
function bgChange(bgN) {
document.body.background = bgN;
}
//-->
</SCRIPT>
<body>～</body>に以下のソースを組み込みます。
ここでは元の雲の壁紙をベースにして４枚の壁紙を展示し、それをクリックすることによって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は画像の縦）
今回使用した壁紙の画像はこちら
 元の画像 |
 lace1.png |
 lace3.png |
 lace5.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の記入場所は、基本的に４つの場所になります。
① <head>～</head>（ヘッダー内）
ここの例の様にHTML文書の<head>～</head>に記入します。
② <body>～</body>（ボディ内）
表示する場所に記入します。
③ タグ内
タグの中に直接JavaScriptを記入します。
④ 外部ファイル
外部ファイルに記入して呼び出します。（複数のページで同じJavaScriptを使用する時などに）
素材屋でよく見かけると思うのですが、壁紙をクリックしたら背景の壁紙が変わる仕組みです。 あれは、JavaScriptを使用しています。その作り方です。（※ HTML5での作成ではありません。）