Change Image onMouseOver

Simple script to change the image when the mouse pointer moves over the image and then back when out:

<html>
	<head>
		<title>JavaScript</title>
	</head>
	<body>
		<script>
			var image1 = new Image();      // Preload first image
			img1.src = "1.jpg";
			var image2 = new Image();      // Preload second image
			img2.src = "2.jpg";
		</script>
		<h1>Move mouse over image to change</h1>
		<img name="myImg" src="1.jpg"
			onMouseOver="document.myImg.src=img2.src;"
			onMouseOut="document.myImg.src=img1.src;"/>
	</body>
</html>

Leave a Reply