にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

マウスクリックで表示画像を差し替える方法 [装飾・内容変更]

表示されている画像を別の画像に差し替えたい(変化させたい)場合は、JavaScriptを使って対象の画像(img要素)のsrcプロパティに新画像のURLを代入するだけで簡単に実現できます。ここでは例として、閲覧者がマウスをクリックすることで画像を差し替える機能を作ってみます。

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

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

ある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」を指定するだけで、差し替え処理を実行してくれる関数です。

JavaScriptソース

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ふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---