前回に続いて、どうぶつ写真の紹介ページを作っていきます。
今回は、写真そのものをクリックすれば順番に切り替わっていくプログラム。
まずは、3枚のどうぶつ画像を数字つきの名前で保存しました。
前回と同じように、画像の書き出しエリアを作りましょう。
ここではpictという名前でIDをつけ、マウスクリックで処理を実行するonClickを書きます。
|
1 |
<img id='pict' img src='img/a1.jpg' onClick='btn()'> |
初期表示にはa1.jpgをセット。
続いて、a2→a3と進んでいくための変数を用意します。
|
1 2 3 4 |
<script> var pictureNo = 1; var img = document.getElementById('pict'); </script> |
変数pictureNoには初期値1をセット。
getElementByIdは、HTMLの中から指定したIDを取得して、そこに何らかの処理をしたいときに用います。
ここでは、pictという場所に、変数imgの内容を表示させます。
その内容というのが、クリックされるたびに変わっていくんですね。
クリックしたときのアクションbtn()を追加で書いていきましょう。（↓黄色のところ。）
|
1 2 3 4 5 6 7 8 |
<script> var pictureNo = 1; var img = document.getElementById('pict'); function btn(){ pictureNo = (pictureNo < 3 ? pictureNo + 1 : 1); img.setAttribute('src','img/a' + pictureNo + '.jpg'); } </script> |
pictureNoは、クリックされるたびに1ずつ増えていきますが、3になるとまた1に戻ります。
それに応じて、jpg画像も切り替わっていきました。
getElementByIdプロパティを使って、HTMLの内容を書き換えるJavaScriptプログラミング。
この仕組みを使えば、いろいろな表現に応用できそうですね。
