imageオブジェクト

JavaScript 基礎 授業



画像（イメージ）を操作する


  • 画面をクリックするごとに別の画像が表示される






ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イメージの操作</title>

<style>
body {
	text-align: center;
	}
</style>

<script>
var imgs;
function init() {
	imgs = new Array(3);
	for(var i = 0;i <= (imgs.length - 1);i++) {
	  imgs[i] = new Image(400,500);
		imgs[i].src = 'img/' + i + '.jpg';
		}
}
window.onload = init;

var num = 0;
function changeImg() {
	document.myImg.src = imgs[num].src;
	num++;
	if(num == 3) num = 0;
	}

</script>

</head>
<body>

<h1>イメージを操作する</h1>
<p><img src="img/off.jpg" name="myImg" width="400" height="500"  alt="" onclick="changeImg()"></p>

</body>
</html>

ブラウザで表示


  • クリックするたびに画像置換