クリックで写真を拡大。
出来上がりはこんな感じ。
仕様。
１０枚の画像を並べて表示させる。その画像をクリックすると、拡大領域にクリックされた画像が表示される。クリックされた画像には周りに、色付きのボーダーをつけ、拡大された画像がどれなのか分かりやすくする。
手順。
1.画面を作る。
2.画像がクリックされたときの処理を書く。
➡すでに１回以上クリックされている場合とまだ１回もクリックされていない状態に分けて考える。前回クリックされた画像の周りの枠線を消す処理。クリックされた画像を拡大する処理。クリックされた画像の周りに枠線を表示する処理。今回クリックされた画像を保存する処理（前回クリックされた画像の周りの枠線を消すため。）。を各必要がある。
説明とソース。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サムネイル拡大表示</title>
<style type="text/css">
img.thumbnail {
width:100px;
}
</style>
</head>
<body>
<h1>サムネイルを拡大してみよう！</h1>
<table>
<tr>
<td>
<img class="thumbnail" src="./images/00.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/01.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/02.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/03.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/04.jpg" onclick="selectPhoto(this);" />
</td>
</tr>
<tr>
<td>
<img class="thumbnail" src="./images/05.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/06.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/07.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/08.jpg" onclick="selectPhoto(this);" />
</td>
<td>
<img class="thumbnail" src="./images/09.jpg" onclick="selectPhoto(this);" />
</td>
</tr>
<tr>
<td colspan="5">
<img id="myPhoto" src="./images/blank.jpg" />
</td>
</tr>
</table>
<script type="text/javascript">
//前回クリックされた画像を格納するための変数。最初表示されたばかりなのでクリックされていないのでnullを入れる。
var zenkaiGazou = null;
//１０個の写真のうちどれかクリックしたときの処理を書く。
function selectPhoto(konkaiGazou) {
//前回クリックされた画像が空でないとき。すなわち、既に１回以上クリックされた状態の場合。
if (zenkaiGazou != null) {
//前回の画像のボーダーを消す。
zenkaiGazou.style.border = "";
}
//拡大領域に今クリックされた画像を表示。
document.getElementById('myPhoto').src = konkaiGazou.src;
//今回クリックされた画像にボーダーを付ける。
konkaiGazou.style.border = "2px solid #FF0000";
//今回クリックされたものの保存。（既に１回以上クリックされているというのを次の処理に残すため。）
zenkaiGazou = konkaiGazou;
}
</script>
</body>
</html>
