JavaScriptでボタンをクリックして画像を表示する処理を記述する方法について説明します。
HTMLで画像を表示する
JavaScriptで画像を表示する前に、HTMLで画像を表示する方法について説明します。
HTML で画像を表示するには、<img>タグを使用します。src属性で画像ファイル名「sample1.png」を以下のように指定します。
<img src=”sample1.png”>
「sample1.png」ファイルは、HTMLファイルと同じフォルダにあるためファイル名だけでよいですが、異なるフォルダに画像ファイルがある場合、パスで指定します。
HTMLファイルが保存されているフォルダの中にimgフォルダがあり、そこに画像ファイルが保存されている場合は以下のように指定します。
<img src=”img/sample1.png”>
HTMLファイルは以下のように記述します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>画像の表示</p>
<img src=”img/sample1.png”>
</body>
</html>
Webブラウザで開くと、以下のように表示されます。
JavaScriptで画像を表示する
JavaScriptで画像を表示する方法について説明します。
JavaScriptで画像を表示するには、対象のimg要素を取得してsrc属性を指定します。
以下はidが「image_file」というimg要素を取得して、src属性に「sample1.png」を指定した例です。
var img = document.getElementById(“image_file”);
img.src = “img/image1.png”;
HTMLファイルは以下のように記述します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>画像の表示</p>
<img id=”image_file”src=””/>
<script>
var img = document.getElementById(“image_file”);
img.src = “img/sample1.png”;
</script>
</body>
</html>
Webブラウザで開くと、以下のように表示されます。
ボタンをクリックして画像を切り替える
ボタンをクリックして画像を切り替えるサンプルプログラムです。
まず、画像を3枚用意し、imageフォルダに保存します。
■sample1.png
■sample2.png
■sample3.png
次に、HTMLファイルにボタンを3つ表示させます。
以下のように記述します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>画像の表示</p>
<input type=”button” onclick=”sampleimg1()” value=”画像1″>
<input type=”button” onclick=”sampleimg2()” value=”画像2″>
<input type=”button” onclick=”sampleimg3()” value=”画像3″>
</body>
</html>
Webブラウザで開くと、以下のように表示されます。
この状態で「画像１」ボタンをクリックしても、何も表示されません。
それは、「onclick」はクリック時の動作で“sampleimg1()”を設定していますが、まだjavascriptで“sampleimg1()”を記述していないからです。
「画像１」ボタン、「画像２」ボタン、「画像３」ボタンに「onclick」はクリック時の動作を、以下のように記述します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>画像の表示</p>
<script>
var img;
function sampleimg1(){
img = document.getElementById(“image_file”);
img.src = “img/sample1.png”;
}
function sampleimg2(){
img = document.getElementById(“image_file”);
img.src = “img/sample2.png”;
}
function sampleimg3(){
img = document.getElementById(“image_file”);
img.src = “img/sample3.png”;
}
</script>
<input type=”button” onclick=”sampleimg1()” value=”画像1″>
<input type=”button” onclick=”sampleimg2()” value=”画像2″>
<input type=”button” onclick=”sampleimg3()” value=”画像3″>
<br><br>
<img id=”image_file”src=””/>
</body>
</html>
Webブラウザで開くと、以下のように表示されます。
「画像１」ボタンをクリックします。
sample1.pngファイルが表示されます。
「画像２」ボタンをクリックします。
sample2.pngファイルが表示されます。
「画像３」ボタンをクリックします。
sample3.pngファイルが表示されます。
まとめ
JavaScriptでボタンをクリックして画像を表示する方法について説明しました。
クリック時の動作は「onclick」に指定します。
ファイル名を工夫し、forを使った繰り返し処理を使用して、画像を切り替えるなどの処理も応用して作成することができます。
以上、JavaScriptでボタンをクリックして画像を表示する方法についてでした。