ボタンに対応した画像を表示するJavascript
いくつかのボタンを用意して、そのボタンに対応する画像を表示するJava Scriptです。ここでは「.setAttribute」という命令の使い方の一例です。
＊＊＊＊＊＊＊＊＊＊ ここから
下のボタンを押すとご当地のナンバープレートが表示されます。
＊＊＊＊＊＊＊＊＊＊ここまで
前ページで画像をクリックすると説明が別枠で表示される例を示しましたが、ここでは、1つのボタンをクリックすると、同じ画面内で対応する画像に変わるJavascriptの例です。
8枚のご当地のバイクのナンバープレート画像を用意してあり、イベントハンドラーの「onclick」で、ボタンに対応する画像を呼び出しています。
getElementById と setAttribute というメソッドを使っています。
こちらのページには、さらに画像の下にさらに紹介文が出る例がありますので参考にしてください。
PRこのJavascript
HTML部分に下のコードをすべてを書いているだけのものです。つまり、<script>～</script>を使ってコードを書いていません。
<img id="myPlate" src="img/np_daito.jpg">
<br>
下のボタンを押すとご当地のナンバープレートが表示されます。<br>
<br>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_daito.jpg');">大 東 市</button>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_higasioo.jpg');">東大阪市</button>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_hirakata.jpg');">枚 方 市</button>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_ibara.jpg');">茨 木 市</button><br>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_ikeda.jpg');">池 田 市</button>
//以下省略
考え方や注意する点
Javascriptの記述の仕方には独特なので、初めのうちは馴染みにくいと思いますので少し詳しく説明します。
ここでは、DOM（Documentt Object Model）のメソッドの「.getElementById」「.setAttribute」を使っています。
この2つは基本的で使い勝手の良いもので、何かを表示させるときに使う基本的なものです。
「.getElementById」はID属性のノードを取得する… ということをさせているのですが、これは、IDの部分の内容を他の表示に変えるためのもので、ここでは、すでに表示されている画像<img>の位置に「id="myPlate"」をつけているので、そのidの画像を他の画像に入れ替えをしています。
そして、「.setAttribute」は、属性や値を追加するメソッド（命令）です。
sorce（ソース）を表す「src」属性と、入れ替えたい画像のファイル名を並べて書くことで別の画像に変えて表示できます。 （ここでは、画像はimgホルダーおいているために、img/** としてそこにある画像を呼び出しています）
このように、「文字の足し算（つなぎ合わせ）」はしばしば使う場面が出てきます。
注意する点は、Javascriptでは、半角空白はどこに入れてもいいので、コードを見やすくするために使うといいのですが、全角空白が混じっているとダメで、それを見つけるのが大変だった… ということがありましたので、もしもうまく動かなかった場合には、コードの書き間違いや空白部分を疑ってみる事も覚えておいてください。
コードを書き間違えない対策として、マイクロソフトの「Visual Studio Code（利用は無料です）」を使うのもいい方法です。
そして、画像名や変数などの名前の付け方も、自分なりにルールを決めておくと、メソッドと自分で作った変数が区別できるのでいいかもしれません。
私は、変数には「myAbc」のように「my＋最初の文字を大文字」のようにしていますし、画像名は市町名のローマ字にするなどで、少し時間が立ってもわかるような自分なりのルールにしています。
しかし、その反面で、Javascriptで 「＋＋＝」「－－＝」などの算術演算子で加減による変化をさせて使うことが多いので、わかりやすい名前ではなくて「英字＋数字（例えばjim001など）」のような画像名にすれば、画像を連続した数字で扱えて便利な場合もあります。
そして、（詳細は調べていただくといいのですが） 使えない文字があるのにも注意ですが、ここでは細かいことはパスします。
こちらのページで、画像切替にプラスして、文字（説明文）を一緒に変えて表示するJavascript を紹介しています。
PR
