サムネイルをクリックすると大きな製品画像が表示するJavascriptの例です。ここでは、getAttributeやsetAttributeを使っています。、
小さな画像をクリックすると大きな画像になる
前のページ（→こちら）では、ボタンをクリックすると画像が表示する方法の例を示しました。 ここではイベントハンドラーの「onclick」ボタンを使わずに、小さな画像をクリックすると大きな画像が表示するようにしています。
ボタンを使ってもいいのですが、小さなサムネール画像をクリックすると大きな画像が表示されるというケースは、製品紹介などをする場合や大きな画像を別のところに表示させる場合などに使えるでしょう。
それぞれの画像はあらかじめ用意しておきます。
サムネールをボタン代わりにして大きな画像を表示
＊＊＊＊＊＊＊＊＊＊ ここから
下の小さな画像をクリックすると、大きな画像が表示されます。
＊＊＊＊＊＊＊＊＊＊ここまで
HTML/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ホルダーに置いた場合には、「img/**」というパスになってしまうので、これではうまく動かないために、HTMLファイルと同じホルダーに画像をおいています。
ここでは、使い道の多いDOMメソッドの getAttributeやsetAttribute を使っているためにこのような画像の置き場にしないとうまく動かなかったのですが、これはあまり良い方法ではないので作り直したいのですが、時間があるときに考えるということにしておいて、当面はこのままにしています。
そして、「thisをobjに」渡したので、<script>の2行目は document.getAttribute ではなく、obj.getAttribute にしていることに注意してください。
ここでは、関数myClickの引数を「this」として、それを<script>内で「obj」をつくって、その obj に渡してから、.setAttribute で画像を呼び出して表示させているなど、考え方とメソッドの使い方の説明用として上のコードをみていってください。
なお、全般的なことですが、通常は「sprict」部分は文字数が多いなどで、読み込みに時間がかかるものが多いこともあって、ページ全体を速く表示させる必要性から、</body>の直前に書くのが一般的ですが、ここでは、説明用の記事なので、それを無視して、上から順にHTMLに沿って書き流しています。
【変数について】
私が勝手に作っている変数名は「myPic」のように 「my＋最初が英大文字」にしています。
変数とメソッドの区別がつきにくいと、コードの内容が理解しにくくなる場合が意外と多いので、このように、自分なりの変数の付け方（ルール）を決めておくようにするのがいいでしょう。
これと同様な場面には使えそう
この例では、サムネイル画像が小さすぎて見にくいのですが、適当な大きさの画像にして、それをクリックすると大きな画像になるという使い方は、いろいろなシーンに応用できるでしょう。
実際に使われているものを見ると、サムネール画像にマウスを置くとハイライトするなどの変化をつけているものや、ぼやっとしていた画像が次第に鮮明になるというHPなどがありますから、少しアレンジしてどんどん発展できると思うのですが、ここではできるだけシンプルな基本の構造のみを紹介しています。 説明が不十分でわかりにくいかもしれませんが、コードをコピペして、自分なりのアレンジをして楽しんでいただきたいと思います。
