遊べるJavaScript入門ロゴ

ボタンに対応した画像を表示するJavascript

前ページでは、画像をクリックすると説明が別枠で表示されるものでしたが、ここでは、1つのボタンをクリックすると、同じ画面内で対応する画像に変わるJavascriptの例です。

ここでは、8枚のご当地のバイクのナンバープレート画像を用意して、イベントハンドラーの「onclick」で、ボタンに対応する画像を呼び出していますが、getElementById と setAttribute というメソッドを使っています。

こちらのページに、このJavascriptの書き方を変えて、画像の下にさらに紹介文が出るものを作りましたので参考にしてください。

ボタンに対応する画像を表示する

********** ここから

大阪府大東市のナンバープレート
下のボタンを押すとご当地のナンバープレートが表示されます。



**********ここまで

PR

このJavascript

HTML部分に下のコードを書いているだけのものです。

<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



(来歴)R6.5作成  
PR

AmazonのJavascript本 送料無料


楽天ブックスは品揃え200万点以上!



記事の目次へ

電子工作の記事の目次へ