KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > プログラム > JavaScriptで画像を変更する方法【初心者向け】

プログラム

JavaScriptで画像を変更する方法【初心者向け】

children-593313_640

今回は、JavaScriptで画像を変更する方法について解説します。
JavaScriptはWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

画像とボタンを表示させよう

まずは、画像とボタンを画面に表示しましょう。
画像を変更するimgタグにid属性を指定するところがポイントです。

グー

画像を変更する書き方

次に、画像を変更する書き方を説明します。
JavaScriptで画像を変更するときは、下記のように書きます。

下記のようなimgタグの画像を「images/gu.jpg」から「images/choki.jpg」に変更したい場合は、「imgタグのid属性」に「janken」を指定し、「画像のパス」に「images/choki.jpg」を指定します。

ボタンをクリックした時に画像を変更しよう

JavaScriptでボタンをクリックした時に、画像を変更するなどの処理をさせるためには、下記のように書きます。

最後に、各ボタンをクリックした時に画像を変更できるように追記しましょう。

入力できたら、各ボタンを押して確認してみましょう。

チョキ

パー

グー

今回は、ボタンをクリックした時に画像を変更する方法を紹介しましが、マウスがボタンの上に重なった時や、離れた時に画像を変更させることもできます。
ご自身で調べて、いろいろ試してみましょう。

この記事に関連する講座

JavaScriptをより理解したくなったら

詳しくはこちら