Assignment 2 Task 2

<!DOCTYPE html>
<html>
<head>
	<title>A2-Task2</title>
</head>
<body>
	<img class="img" id="0" height="200" width="200">
	<img class="img" id="1" height="200" width="200">
	<img class="img" id="2" height="200" width="200">

	<script type="text/javascript">
		var images = ["sun.jpeg","meadow.jpeg","moon.jpeg"];
		const allImg = document.getElementsByClassName("img");

		renderImage();

		function renderImage() {
			for (i = 0; i < allImg.length; i++) {
				allImg[i].src = images[i];
				allImg[i].addEventListener('mouseover',(e) => swap(e));
			}
		}

		function reRenderImage() {
			for (i = 0; i < allImg.length; i++) {
				allImg[i].src = images[i];
			}
		}

		function swap(e) {
			var index = parseInt(e.target.id);

			if (index!=2) {
				temp = images[index];
				images[index] = images[index+1];
				images[index+1] = temp;
			}

			reRenderImage();
		}
	</script>
</body>
</html>
Editor is loading...