【Javascript】画像の操作方法

【Javascript】
画像の操作方法

「Javascript」では、画像をクリックで変更したり、
一定時間で変更することも可能。
サイズ変更はもちろん、色々な操作が「Javascript」で画像操作が可能です。

INDEX

■ 画像を読み込む方法
■ 画像を「Javascript」で変更する方法
■ 画像・ファイルの読み込み完了のタイミングを知る方法

画像を読み込む方法

サンプルコード

var GetImg = new Image();
GetImg.src = "読み込みたい画像のURL";
GetImg.onload = function() {
alert("画像ファイル読み込み完了");
}
document.body.appendChild(GetImg);

Back

画像を「Javascript」で変更する方法

「javascript」では、画像を変更する事も簡単。
画像を変更するだけならば、いくつかの方法がある。
「javascript」以外でも、「CSS」だけでも画像を変更する事が出来る。
どれが正解というのもない。きちんと機能するのが大切。

画像変更の「javascript」コードの記述方法

HTMLコードの「img」タグのイベントハンドラに直接「javascript」コードを記述する。
「javascript」で、画像変更を実行する関数を記述して、「img」タグのイベントハンドラで、関数を呼び出す。

イベントハンドラに直接記述するサンプルコード

「Javascript」外部ファイルに記述した関数を呼び出すサンプルコード

HTMLファイル

「Javascript」外部ファイル

function ImageChangeFunc(url){
window.document.getElementById("SampleImage").src=url;
}

もう一つのパターンは、

HTMLファイル

「Javascript」外部ファイルに一括記述する

function ImageChangeFunc(url){
window.document.getElementById("SampleImage").src=url;
}
window.document.getElementById("SampleImage").addEventListener('mouseenter',ImageChangeFunc('マウスを乗せたときに表示する画像ファイル名.jpg')) window.document.getElementById("SampleImage").addEventListener('mouseleave',ImageChangeFunc('./最初の画像ファイル名.jpg'))

補足

イベントハンドラ「onMouseOver」「onMouseOut」

画像を変更させるのは、「onMouseOver="this.src='ファイルURL'"」の部分で、画像を元に戻すのは、「onMouseOut="this.src='ファイルURL'"」の部分。

「onMouseOver」＝マウスを対象の上にかぶせた時にする行動を記述する属性。
「onMouseOut」＝マウスを対象の上からはずした時にする行動を記述する属性。
「this.src='ファイルURL'」＝画像のURLを変更するというコード。

「this.src」の意味

「this」＝属性が記述されているタグ（要素）
「src」＝画像のURLを指定する属性

「”（ダブルクォート）」と「’（シングルクォート）」

「onMouseOver="this.src='ファイルURL'"」で、「”（ダブルクォート）」と「’（シングルクォート）」の二つが利用されています。
両方とも「”（ダブルクォート）」の場合、「onMouseOver」と「this.src」の区切りである「”（ダブルクォート）」が混在してしまいます。
それを避けるために、「”（ダブルクォート）」の中で、「”（ダブルクォート）」を使いたい場合、「’（シングルクォート）」を利用します。
逆でも記述可能です。
「’（シングルクォート）」の中で、「”（ダブルクォート）」を使うことで混在を防ぐことができます。

Back

画像・ファイルの読み込み完了のタイミングを知る方法

「ページ読み込み完了時に処理を実行させる」と同じように、「onload」イベントを利用する。

画像などを、「javascript」で変更させたりするときに、
画像が読み込まれていないと表示されないなどの状況が発生する。
そんな時に、「onload」イベントを利用して、
画像ファイルなどの読み込み完了のタイミングで、処理を実行できる。

サンプルコード

var GetImg = new Image();
GetImg.src = "読み込みたい画像のURL";
GetImg.onload = function() {
alert("画像ファイル読み込み完了");
}
document.body.appendChild(GetImg);

var GetFile = document.createElement('Script');
GetFile.src = "スクリプトファイル名";
GetFile.onload = function() {
alert("スクリプトファイル読み込み完了");
}
document.body.appendChild(GetFile);

Back