JavaScriptで画像をクリックして画像を変更する処理を記述する方法について説明します。
前回、ボタンをクリックして画像を表示する 処理について説明しました。
今回は、表示されている画像をクリックして、画像を変更する処理について説明します。
画像をクリックして画像の表示サイズを変更する
JavaScriptで画像の表示サイズを変更する方法について説明します。
画像をクリックすると、画像の表示サイズを変更するプログラムです。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>画像の変更</p>
<img id=”image_file”src=”img/sample1.png” width = 100 onClick=”henkou()”>
<script>
function henkou() {
img = document.getElementById(“image_file”);
if (img.width == 100) {
img.width = 300;
} else {
img.width = 100;
}
};
</script>
</body>
</html>
「sample1.png」ファイルの横幅の初期値（最初に表示したときの値）を100（単位：ピクセル)に設定しています。
そして、画像をクリックしたときの動作は、「onClick=”henkou()”」で指定しています。
<img id=”image_file”src=”img/sample1.png” width = 100 onClick=”henkou()”>
onClickは、「クリックされたら」という意味です。<img>タグの中に、「画像がクリックされると、henkou()が動き出す」と書いてあります。
onClickのようなものを、イベントハンドラと呼びます。
イベントを起こすきっかけを与えてくれるもの、という意味です。
この場合は、画像をクリックすることが、画像のサイズを変更するというイベントのきっかけになっています。
イベントハンドラは、他にもたくさんあります。
以下は一例です。
| イベントハンドラ | 説明 |
| onSelect | テキストが選択されたときに発生 |
| onLoad | ページや画像の読み込みが完了したときに発生 |
| onKeyPress | キーが押されたときに発生 |
| onMouseOver | マウスが上に来たときに発生 |
| onDrag | ドラッグしたときに発生 |
henkou()は<script>タグの中に記述しています。
<script>
function henkou() {
img = document.getElementById(“image_file”);
if (img.width == 100) {
img.width = 300;
} else {
img.width = 100;
}
};
</script>
if文で、画像の横幅が100だったら、300に変更、100でなければ100に変更するように記述しています。
実行すると以下のようになります。
Webブラウザで開いたときです。横幅が100です。
画像をクリックします。
画像が大きく表示されます。
もう一度画像の上でクリックします。
画像が小さくなります。
画像をクリックして画像を変更する
JavaScriptで画像を変更する方法について説明します。
画像をクリックすると、別の画像が表示されるプログラムです。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>画像の変更</p>
<img id=”image_file” src=”img/sample1.png” onclick=”henkou()”>
<script>
var img_src = new Array(“img/sample1.png”,”img/sample2.png”,”img/sample3.png”);
var i = 0;
function henkou() {
if (i == 2) {
i = 0;
} else {
i ++;
}
document.getElementById(“image_file”).src = img_src[i];
}
</script>
</body>
</html>
先ほどの画像の表示サイズを変更するプログラムと同様、画像をクリックしたときの動作は、「onClick=”henkou()”」で指定しています。
<script>タグでは、まず、初期値の設定をしています。
「img_src」には、配列で、3枚の画像のファイル名を設定しています。
・img/sample1.png
・img/sample2.png
・img/sample3.png
「i」は配列の要素数で、初期値は0を設定しています。
var img_src = new Array(“img/sample1.png”,”img/sample2.png”,”img/sample3.png”);
var i = 0;
「document.getElementById(“image_file”).src = img_src[i];」はタグのIDが”image_file”のsrcに、配列「img_src」の要素数iの画像を設定しています。
function henkou() {
if (i == 2) {
i = 0;
} else {
i ++;
}
document.getElementById(“image_file”).src = img_src[i];
}
Webブラウザで開くと、以下のように「img/sample1.png」が表示されます。
画像をクリックします。
「img/sample2.png」が表示されます。
画像をクリックします。
「img/sample3.png」が表示されます。
さらに画像をクリックします。
「img/sample1.png」が表示されます。
if文で、i==2の場合、i=0を設定したので、最初の画像に戻りました。
まとめ
JavaScriptで画像をクリックして画像のサイズを変更する方法、画像を変更する方法について説明しました。
クリック時の動作は「onclick」に指定します。
「onclick」はイベントハンドラといい、他にもたくさんあります。
以上、JavaScriptで画像をクリックして画像を変更する方法についてでした。