Something

<script type="text/javascript">
     window.onLoad = function() {
         document.getElementById("but_switch").onclick = switch_animal();
     }
    
     function switch_animal() {
	 var critter = document.getElementById("snake");
	 critter.setAttribute('visibility','visible');
     }
</script>

<html>
<head>
	<title>Critters.... </title>

	<script type="text/javascript" src="./scripts/critters.js"></script>

	<style type="text/css"> 
	  .critter { 
	  position: absolute; 
          visibility: hidden; 
	  } 
	</style> 
</head>

<body>
	<h1 id="title">Critters!</h1>
	<br>
	<img class="critter" id="racoon" src="./pics/raccoon.jpg" alt="Cuddly Wuddly!">
	<img class="critter" id="snake" src="./pics/snake.jpg" alt="Yikes!">
	<img class="critter" id="kangaroo" src="./pics/kangaroo.png" alt="Ultra Cool!">
	<br>
	<button id="but_switch" type="button">Change Animal</button>

</body>
</html>