遊べるJavaScript入門ロゴ

ボタンで画像と説明を表示するJavascript

前のページ(→こちら)では、8枚の画像を用意して、それぞれに対応するボタンを押すと画像が変わるJavascriptを示しましたが、ここでは、書き方を変えたJavascriptで、ボタンに対応する画像とともに、簡単な紹介文を呼び出しています。

ボタンに対応して画像や文章を表示するために、ボタンごとに関数を作って、それぞれに.getElementByIdで「id」の内容を取得して、 .setAttribute で src属性とjpgファイルを表示し、.textContent で紹介文を書き出しています。

やり方は他にもあるでしょうが、一つの方法として覚えておくと使える場面は多いでしょう。


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

下のボタンを押すと、ご当地のナンバープレートが表示されて、さらに、簡単な紹介文が表示されます。
もちろん、これらの図柄は原付き等バイク用に数量限定で交付されたものの例です。写真を一部加工して使用させていただいています。

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




大阪府大東市のナンバープレート


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

PR

このJavascript

【HTML部分】
<img id="myPlate" src="img/np_daito.jpg" alt="大阪府大東市のナンバープレート">
<br>
<textarea id="myHyouji" cols="40" rows="6">ここに紹介文が表示されます</textarea>

【script部分】
let myPla = new Array(8);

myPla[1] = "大東(だいとう)市 : 大阪府の東部、飯盛山の・・・・";
myPla[2] = "東大阪(ひがしおおさか)市 : 高校ラグビーで・・・・";
myPla[3] = "枚方(ひらかた)市 : 遊園地の「ひらパー」で・・・・";
myPla[4] = "茨木(いばらき)市 : 大江山に住む鬼「茨木・・・・";
myPla[5] = "池田(いけだ)市 : カップヌードルミュージアム・・・・";
myPla[6] = "門真(かどま)市 : 「パナソニック」や・・・・";
myPla[7] = "交野(かたの)市 : 2011年に市制40周年記念で・・・・";
myPla[8] = "箕面(みのお)市 : ローマ字では「minoh」と表記・・・・";

function myPhoto1() {
document.getElementById('myPlate').setAttribute('src', 'img/np_daito.jpg');
document.getElementById('myHyouji').textContent=myPla[1];
}

function myPhoto2() {
document.getElementById('myPlate').setAttribute('src', 'img/np_higasioo.jpg');
document.getElementById('myHyouji').textContent=myPla[2];
}

function myPhoto3() {
document.getElementById('myPlate').setAttribute('src', 'img/np_hirakata.jpg');
document.getElementById('myHyouji').textContent=myPla[3];
}

function myPhoto4() {
document.getElementById('myPlate').setAttribute('src', 'img/np_ibara.jpg');
document.getElementById('myHyouji').textContent=myPla[4];
}

  //以下省略

全体を見たりコピーする場合は、「ページのソースの表示」で。

ナンバープレートの画像は「img」ホルダーにおいてあるので img/** というパスになっています。

作成した変数などは「my***」のように頭に「my」をついたものにして、メソッドと区別しやすいようにしています。

PR

考え方や参考事項

イベントハンドラーを用いて、「onclick」でそれぞれの「fanction」に飛ばして、画像の表示は .setAttribute 文字の表示は .textContent を用いています。

文字の表示は textarea を用いて、枠内に表示させています。

このように、文字や画像を切り替えて表示する場合は、「button onclick」「new Array」「.getElementById」「.setAttribute」「.textContent」 を使う場面が多いので、この使い方をマネするといろいろな応用ができるでしょう。

こちらのページに、Javascriptの書き方の違うページがあります。参考にしてください。


記事の目次へ


PR



(来歴)R6.5作成  
PR

AmazonのJavascript本 送料無料


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



記事の目次へ

電子工作の記事の目次へ