小さな画像をクリックすると大きな画像になる
前のページ（→こちら）では、ボタンで画像を表示するやり方の例を示しました。 ここではイベントハンドラーの「onclick」ボタンではなくて、小さな画像をクリックすると大きな画像が表示するようにしています。
ボタンを使ってもいいのですが、小さなサムネール画像をクリックすると大きな画像が表示されるというケースは、製品紹介などをする場合や大きな画像を別のところに表示させる場合などに使えるでしょう。
サムネールをボタンの代わりにして大きな画像を表示する
＊＊＊＊＊＊＊＊＊＊ ここから
下の小さな画像をクリックすると、大きな画像が表示されます。
＊＊＊＊＊＊＊＊＊＊ここまで
このJavascript
<img id="myPic" src="img/np_daito.jpg"><br> //画像を「img」というホルダーに置いています
<p>下の小さな画像をクリックすると、大きな画像が表示されます。</p>
<div id="photo_list"> //サムネールはHPと同じホルダーにおいてあります
<img src="daito.jpg" onclick="myClick(this)">
<img src="higasioo.jpg" onclick="myClick(this)">
<img src="hirakata.jpg" onclick="myClick(this)">
<img src="ibara.jpg" onclick="myClick(this)"><br>
<img src="ikeda.jpg" onclick="myClick(this)">
<img src="kadoma.jpg" onclick="myClick(this)">
<img src="katano.jpg" onclick="myClick(this)">
<img src="mino1.jpg" onclick="myClick(this)"><br>
</div>
<script>
function myClick(obj) { //thisをobjで受け取るという方法を使っています
let myPicName = obj.getAttribute('src');
myPicName = 'img/np_' + myPicName ;
document.getElementById('myPic').setAttribute('src', myPicName);
}
</script>
考え方
ここでは、この記事と同じディレクトリに小画像が8つを置いており、それがクリックされると、その他の画像のある「img」の大きな画像を表示させています。
私の画像のすべてを「img」ホルダーに置いていますので、表示のためには画像の「scr」属性を .getAttribute で取得しているので 「myPicName = 'img/np_' + myPicName」としています。
このために、ボタン用のサムネールの画像を私の画像用ホルダーに置くと「img/**」というパスになってしまうので、この書き方ではうまくいかないので、HPと同じところに画像をおいています。
ここでは、使い道の多いDOMメソッドの getAttributeやsetAttribute を使っているためにこのような画像の置き場になっていますが、これはあまり良い方法ではないので作り直したいのですが、当面はこのままにしておきます。
そして、「thisをobjに」渡したので、<script>の2行目は document.getAttribute ではなく、obj.getAttribute にしていることに注意してください。
ここでは、関数myClickの引数を「this」として、それを<script>内で「obj」をつくって、その obj に渡してから、.setAttribute で画像を呼び出して表示させているなど、考え方とメソッドの使い方の説明用としてコードをみていってください。
なお、全般的なことですが、通常は「sprict」部分は、読み込みに時間がかかるものが多いために、早くページを表示させる必要性で</body>の直前に書くのが一般的ですが、ここでは、説明用の記事なので、それを無視して、上から順に書き流しています。
【変数について】
私が勝手に作る変数は「ｍｙPic」のように 「my＋最初が英大文字」にしています。
変数とメソッドの区別がつかないために、コードの内容が理解しにくくなる場合が意外と多いので、自分なりの変数の付け方（ルール）を決めておくようにするのがいいでしょう。
これは1つの書き方の対応例ですが、このようにJavascriptは、ちょっとした記述の違いで特殊な事情が生じたり、動かないことがしばしば起きてしまいます。
例えば、私はホームページビルダー22でこの記事を書いていますが、script部分をHPに直接書くのではなく、私はマイクロソフトの無料エディター「Visual Studio Code」にかいてそれをコピーしてHTLMページに貼り付けています。
この「VSコード」は、エラーを見つけてくれるので結構便利ですので、検索してみてください。
これと同様な場面には使えそう
この例では、サムネイル画像が小さすぎて見にくいのですが、適当な大きさの画像にして、それをクリックすると大きな画像になるという使い方は、いろいろなシーンに応用できるでしょう。
実際に使われているものを見ると、サムネール画像にマウスを置くとハイライトするなどの変化をつけているものや、ぼやっとしていた画像が次第に鮮明になるというHPなどがありますから、少しアレンジしてどんどん発展できると思うのですが、ここではできるだけシンプルな基本の構造のみを紹介しています。 さらに自由なアレンジで楽しんでいただくのも面白いでしょう。
