地域紹介のページを作ります。ここでは地域の名所について写真で紹介します。
写真を複数並べると画面が間延びしてしまいます。それぞれに解説を付けるのなら良いかも知れませんが、ここでは簡潔な解説にとどめ、JavaScriptで写真を切り替える仕組みにします。
「p1.html」をコピーして「p6.html」にします。
ヘッダの一部を変更します。
<h1 id="header">●●●●商店：地域の名所</h1>
写真はwikipediaの園城寺より5枚使用します。（この写真はクリエイティブコモンズによって二次利用が許可されています）
以下の５つの写真を右クリックで名前を付けて保存してください。保存先は「img」フォルダで、ファイル名はそれぞれ変更が必要です。
| 金堂 | 大門 | 釈迦堂 | 鐘楼 | 毘沙門堂 |
|---|---|---|---|---|
|
|
|
|
|
| onjoji01.jpg | onjoji02.jpg | onjoji03.jpg | onjoji04.jpg | onjoji05.jpg |
記述の一部を練習用に使います。
テーブル内に写真と解説文、リンク用のURLを記述します。
写真はまず最初に表示する金堂の画像を置きます。
写真の右にはwikipediaから解説文を載せておきます。引用元を明示していますが、今回は練習用のためリンクは省略しておきます。
写真の下には各画像の見出しを並べておきます。これは後で、スクリプトを利用したリンクに作り替えます。
その右側に園城寺へのリンクを載せます。ヤフーで検索して調べてみると良いでしょう。
テーブルの下にはグーグルマップを利用して地図を置きます。グーグルマップの利用方法はこちらを参照してください。
<div id="mainmenu">
<div class="menutitle">園城寺</div>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><img src="img/onjoji01.jpg" width="240" id="photo"></td>
<td>園城寺（おんじょうじ）は、滋賀県大津市にある、天台寺門宗の総本山。山号を「長等山（ながらさん）」と称する。<br>
開基（創立者）は大友与多王、本尊は弥勒菩薩である。日本三不動の一である黄不動で著名な寺院で、観音堂は西国三十三箇所観音霊場の第14番札所である。また、近江八景の1つである「三井の晩鐘」でも知られる。<br>
なお一般には「三井寺（みいでら）」として知られている。（wikipediaより引用）</td>
</tr>
<tr>
<td>金堂 大門 釈迦堂 鐘楼 毘沙門堂</td>
<td><a href="http://www.shiga-miidera.or.jp/" target="_blank">http://www.shiga-miidera.or.jp/</a></td>
</tr>
</table>
<iframe src="http://maps.google.co.jp/maps?ll=35.013373,135.852857&z=15&output=embed" width="495" height="250"></iframe>
</div>
<img>タグにはwidthで幅だけを設定しています。これは写真の横幅だけを一定に保ち、縦の長さは自動的に決めるということです。これにより、写真のサイズがバラバラであった場合でも、横幅だけは変わりません。縦長の写真も綺麗に収まります。また、idも割り当てています。これは後でJavaScriptを使って写真を入れ換えるため、その位置を示すID名となります。
写真を切り替えるため、JavaScriptを用意します。
<script type="text/javascript">
image = new Array();
for (n=0; n<5; n++) {
image[n] = new Image();
}
image[0].src = "img/onjoji01.jpg";
image[1].src = "img/onjoji02.jpg";
image[2].src = "img/onjoji03.jpg";
image[3].src = "img/onjoji04.jpg";
image[4].src = "img/onjoji05.jpg";
function change_photo(num) {
document.getElementById("photo").src = image[num].src;
}
</script>
このスクリプトでは、配列変数imageを用意し、0～4番までの変数に画像のURLを記録しています。
ユーザー関数change_photoに、変数numに番号を代入し、これを配列変数の番号としています。ID名がphotoの位置には<img>タグがあるので、その属性srcを画像のURLに置き換えています。
for文は5つの繰り返しをしています。下記のように記述しても同じです。
image[0] = new Image(); image[1] = new Image(); image[2] = new Image(); image[3] = new Image(); image[4] = new Image();
同様に5つのURLをプロパティに設定する部分もfor文に直すことができます。少し記述が見にくくなるので、今回はファイル名が分かりやすい記述にしました。
もし、for文を使うとすると次のようになります。
for (n=0; n<5; n++) {
image[n].src = "image/onjoji0" + n + ".jpg";
}
変数nを２カ所で使っています。
配列変数imageで使うのは先と同じですが、ファイル名の間にも使っています。これはファイル名を番号で管理しているためにできる方法です。
ファイル名の一部が数字で、連続しているので、for文で順番に処理することができるのです。本来はその方が、自動処理化することができるので、大きなメリットがあります。写真ごとに内容を示す名前を付けている場合は、最初に示した方法で１つずつURLを入れて行くか、ファイル名を順番に用意した配列変数を事前に作っておきます。
次にのスクリプトに対応する<a>タグを用意します。リンクをクリックすることでスクリプトが呼び出されます。
写真の下に配置した景色の名前にリンクを足します。
<td><a href="javascript:change_photo(0)">金堂</a> <a href="javascript:change_photo(1)">大門</a> <a href="javascript:change_photo(2)">釈迦堂</a> <a href="javascript:change_photo(3)">鐘楼</a> <a href="javascript:change_photo(4)">毘沙門堂</a></td>
リンクをクリックするとユーザー関数change_photo()が呼び出されます。それぞれ引数が違いますので、この番号が呼び出す写真を納めた配列変数imageの要素番号と同じになっています。
そのため、ユーザー変数内では、image[num]と表記されています。
これで店舗サイトの基本的な構築は終わりです。
今度は、これを参考にして、お店のオリジナルサイトを作ってください。
最も重要な部分は店舗、商品、人に関する紹介のページです。それぞれ、その魅力が伝わるページを、見やすく分かりやすく作ります。
問い合わせ用のメールアドレスをメニューやトップページに入れて、お客様からの要望に応えることもできます。色々と工夫をしてみてください。
商品の販売ページについては、通販のサンプルで学習します。