Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:47.

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

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

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

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

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

対象のオブジェクト(画像)のsrcプロパティに、差し替える画像のURLを渡すだけです。 この1行で、表示されている画像を変化させられます。 簡単ですね。

サンプルは以下の通り。

変化する画像領域

(※森の画像を、野原の画像に変化させます。)

指定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つの画像を何度でも差し替えられるようにしたサンプルは以下の通り。

変化する画像領域

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど