マウスクリックで表示画像を差し替える方法

単一の画像表示スペースに次々に画像を表示させたい場合など、表示されている画像を別の画像に差し替えたい(変化させたい)ことがあります。
ここでは例として、閲覧者がマウスをクリックすることで画像を差し替える機能を作ってみます。すごく簡単です。

あるIDが付加された画像を差し替える(変化させる)

例えば「PhotoSpace」というid名が付加されたimg要素に対して表示する画像を差し替えたい場合には、以下のようにJavaScriptを記述します。

document.getElementById('PhotoSpace').src = '新画像URL';

getElementByIdメソッドで対象の要素を特定し、そのsrcプロパティに差し替える画像のURLを渡すだけです。
この1行で、表示されている画像を変化させられます。
簡単ですね。

動作サンプルは以下の通りです。

最初は森の画像が表示されていますが、ボタンをクリックすると野原の画像に切り替わります。

※画像の読み込みに少しだけ時間がかかる可能性があるので、ボタンをクリックした瞬間には切り替わらないかも知れません。ボタンを押してから1～2秒くらい待ってみて下さい。この待ち時間をなくすためには、事前に切り替え先のファイルを読み込んでおけば良いでしょう。いろいろな方法がありますが、例えば高さ1px＆幅1pxのimg要素を使ってページ内に表示しておくなどの方法があります。

指定IDの画像を差し替える汎用関数を作る

差し替えたい画像がたくさんある場合は、いくら各1行で済むとはいえ、上記のソースを毎回記述するのは面倒でしょう。
そんなときは、「指定したIDが付加された画像」を「指定したURLの画像」に差し替えるための汎用関数を作っておくと便利です。

下記の ChangeImage関数では、第1引数に「差し替えたい画像(＝img要素)に付加したID名」を、第2引数に「差し替えたい画像URL」を指定するだけで、差し替え処理を実行してくれる関数です。

function ChangeImage( imgid , newimg ) {
   document.getElementById(imgid).src = newimg;
}

たった3行の特に大したことのないソースですが。
このChangeImage関数は、以下のようにして使います。

ChangeImage('画像ID名' , '新画像URL');

例えば、img要素のid属性に値「 orange 」が指定された画像を、「 apple.jpg 」に差し替えたい場合は、以下のように記述します。

ChangeImage('orange' , 'apple.jpg');

なお、新画像URLは、「http://」から始まるURLを書いても構いませんし、相対パスで書いても構いません。

上記の関数を使って、3つの画像を何度でも差し替えられるようにしたサンプルは以下の通りです。

ボタンをクリックすると、森・野原・海底の画像に変化します。
(※最初に表示されているのは「森」の画像なので、その状態で「森の画像」ボタンをクリックしても何も変化しません。)

(更新日：2017年06月12日)