html5 img标签的name属性替代问题

我希望实现一个单击'换一张'就更换一个图片的功能

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>测试</title>
		<script>
			function re_img(form){
				document.img1.src = 'h2.jpg';
			}
		</script>
	</head>
	<body>
		<form id='form' name='form' method='post' action='test.php'>
			<img name='img1' alt='图片加载失败' src='h1.jpg'></img><br/>
			<a href="javascript:re_img(form)">换一张</a><br/>
			<input type="submit" value="提交">
		</form>
	</body>
</html>

大致效果如下：

效果1

效果2

但是IDEA提示img的name属性是已经废弃的属性（Deprecated HTML attribute），我按照网上的资料尝试将name改成id

<img id='img1' alt='图片加载失败' src='h1.jpg'></img>

然而修改过后图片就更换不了了，请问有其它的解决办法吗？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>测试</title>
		<script>
			function re_img(form){
				document.getElementById("img1").src = 'h2.jpg';
			}
		</script>
	</head>
	<body>
		<form id='form' name='form' method='post' action='test.php'>
			<img id='img1' alt='图片加载失败' src='h1.jpg'></img><br/>
			<a href="javascript:re_img(form)">换一张</a><br/>
			<input type="submit" value="提交">
		</form>
	</body>
</html>