<!doctype html>
<html>
<head>
<title>Image Swapper</title>
</head>
<body>
<div style="text-align:center">
<h2>Image Swapper</h2>
<p>
<img id="leftImg" src="http://balance3e.com/Images/happy.gif">
<img id="rightImg" src="http://balance3e.com/Images/sad.gif">
</p>
<input type="button" value="Swap images" onClick="swap()">
</div>
<script>
function swap(){
var saved=document.getElementById('leftImg').src;
document.getElementById('leftImg').src = document.getElementById('rightImg').src;
document.getElementById('rightImg').src= saved;
}
</script>
</body>
</html>
Add a <script></script>
tag with function swap(){}
inside, then swap the onClick contents with the function call.