今回は、JavaScriptで画像を変更する方法について解説します。
JavaScriptはWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
画像とボタンを表示させよう
まずは、画像とボタンを画面に表示しましょう。
画像を変更するimgタグにid属性を指定するところがポイントです。
|
1 2 3 4 5 6 7 8 9 10 |
[html] <p> <img src="images/gu.jpg" alt="ジャンケン" id="janken" > </p> <p> <button type="button">グー</button> <button type="button">チョキ</button> <button type="button">パー</button> </p> [/html] |
画像を変更する書き方
次に、画像を変更する書き方を説明します。
JavaScriptで画像を変更するときは、下記のように書きます。
|
1 2 3 |
[html] document.getElementById('imgタグのid属性').src='画像のパス'; [/html] |
下記のようなimgタグの画像を「images/gu.jpg」から「images/choki.jpg」に変更したい場合は、「imgタグのid属性」に「janken」を指定し、「画像のパス」に「images/choki.jpg」を指定します。
|
1 2 3 4 5 |
[html] <img src="images/gu.jpg" alt="ジャンケン" id="janken" > document.getElementById('janken').src='images/choki.jpg'; [/html] |
ボタンをクリックした時に画像を変更しよう
JavaScriptでボタンをクリックした時に、画像を変更するなどの処理をさせるためには、下記のように書きます。
|
1 2 3 |
[html] <button type="button" onclick="画像を変更するなどの処理">グー</button> [/html] |
最後に、各ボタンをクリックした時に画像を変更できるように追記しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
[html] <p> <img src="images/gu.jpg" alt="ジャンケン" id="janken"> </p> <p> <button type="button" onclick="document.getElementById('janken').src='images/gu.jpg'">グー</button> <button type="button" onclick="document.getElementById('janken').src='images/choki.jpg'">チョキ</button> <button type="button" onclick="document.getElementById('janken').src='images/pa.jpg'">パー</button> </p> [/html] |
入力できたら、各ボタンを押して確認してみましょう。
今回は、ボタンをクリックした時に画像を変更する方法を紹介しましが、マウスがボタンの上に重なった時や、離れた時に画像を変更させることもできます。
ご自身で調べて、いろいろ試してみましょう。
