ボタンをおすと画像と説明を表示する
前のページ（→こちら）では、8枚の画像を用意して、それぞれに対応するボタンを押すと画像が変わるJavascriptを示しましたが、ここでは、ボタンを押すとそれに対応する画像に加えて、簡単な紹介文を呼び出しています。
考え方は、押されるボタンごとに関数を作っておいて、それぞれに.getElementByIdで「id」の内容を取得して、 .setAttribute で src属性とjpgファイルを表示し、さらに .textContent で紹介文を書き出しています。
やり方は他にもあるでしょうが、一つの方法として覚えておくと使える場面は多いでしょう。
ボタンに対応する画像を表示する
画像はご当地のナンバープレートを用意して、imgホルダーにおいています。 ボタンを押すと、ご当地のナンバープレートが表示されて、さらに、簡単な紹介文が表示されます。
これらの図柄は原付き等バイク用に数量限定で交付されたもので、写真を一部加工して使用させていただいています。
＊＊＊＊＊＊＊＊＊＊ここから
＊＊＊＊＊＊＊＊＊＊ここまで
このJavascript
【HTML部分】
<p><br>
<button onclick="myPhoto1()">大 東 市</button>
<button onclick="myPhoto2()">東大阪市</button>
<button onclick="myPhoto3()">枚 方 市</button>
<button onclick="myPhoto4()">茨 木 市</button><br>
<button onclick="myPhoto5()">池 田 市</button>
<button onclick="myPhoto6()">門 真 市</button>
<button onclick="myPhoto7()">交 野 市</button>
<button onclick="myPhoto8()">箕面市 1</button>
<br></p>
<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」をついたものにすることで、メソッドなどの命令語と区別しやすいようにしています。
考え方など
イベントハンドラーの「onclick」を用いて、ボタンを押すとそれぞれの「fanction」に飛びます。
画像の表示は .setAttribute 文字の表示は .textContent を用いています。
文字の表示は textarea を用いて、枠内に表示させています。
例えば2番目の「東大阪市」のボタンが押されると、[myPhoto(2)]のあるfunctionの部分に飛びます。
function myPhoto2() {
document.getElementById('myPlate').setAttribute('src', 'img/np_higasioo.jpg');
document.getElementById('myHyouji').textContent=myPla[2];
まず、この関数内で、最初に表示している画像(id=myPlate)の代わりに.setAttributeを用いて img/np_higasioo.jpg を表示させています。 そして、textContentで配列とした準備した文章を、あらかじめ用意したテキストエリアに表示させています。
このように、文字や画像を切り替えて表示する場合は、「button onclick」「new Array」「.getElementById」「.setAttribute」「.textContent」 を使う場面が多いので、この使い方はいろいろなところで応用ができるでしょう。
こちらのページは、テキストエリアの表示がないだけですが、Javascriptの書き方の違いなども見比べていただくと良いでしょう。
ここではsetAttributeをつかって属性（=src）と画像を表示させていますが、innerHTML
を使う方法も考えられます。
PR
