Buttons that display two images side by side when clicked

Im very new to HTML and javascript. I need help with a javascript and HTML function. I need to create a basic page with 6 buttons. Each button when clicked displays two images within the browser. The code below I have the layout however I cannot figure out the javascript function to display the images when clicked. The two images below are the type of images I'm trying to display. And the code for the buttons gives an idea of what I'm trying to achieve.

<img src="http://131940.qld.gov.au//DMR.Controls/WebCams/DisplayImage.ashx?FilePath=\Metropolitan\MRMETRO-1458.jpg&amp;-1918551107" id="page_0_content_2_imgWC" class="cam" alt="">
<a href="http://imgur.com/GnzZKDA"><img src="http://i.imgur.com/GnzZKDA.png" title="" /></a>

</center>

<center>
<body>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera One</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Two</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Three</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Four</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Five</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Six</button>
</body>
</center>

This is just an example. I know I need to create a function for the onclick event that will display two different images for each button. This is what I need help with.

Even if there is an onclick event that is global that is used to display images would be great.

Any help would be appreciated.

EDIT: I have this code to do what I wish with one image...How can I get two images into the code???/?

<style type="text/css"> 
img{width:300px;height:250px;border:0;} 
.show{display:block;}
.hide{display:none;}
</style> 
<script type="text/javascript">
function showImg()
{
   var obj=document.getElementById('image01');
   obj.className = 'show';
}
</script>
</head> 

<html> 
<body> 

<img id="image01" src="http://i.imgur.com/GnzZKDA.png" class="hide"> 
<br/> 
<input type="button" onclick = "showImg()" value= "Show image"> 
</html>

Solution

this should work..

<script type="text/javascript">
var imgs = [
 // do not change this...... arrays index start at 0.. 
  [], 
  // write your img url below... like this...
["http://i.imgur.com/GnzZKDA.png" , "http://i.imgur.com/GnzZKDA.png" ],
 ["" , "" ],
  ["" , "" ],
  ["" , "" ],
  ["" , "" ],
  ["" , "" ]
  ];

function showImg (imgIndex) {
  document.getElementById('img1').src = imgs[imgIndex][0] ;
  document.getElementById('img2').src = imgs[imgIndex][1] ;
  }
</script>

<style type="text/css"> 
img{width:300px;height:250px;border:0;} 

</style>

<img id="img1" src="" >
  <img id="img2" src=""  >

<br>

<input type="button" value="Camera One" onclick="showImg(1)" >
  <input type="button" value="Camera Two" onclick="showImg(2)" >
  <input type="button" value="Camera Three" onclick="showImg(3)" >
  <input type="button" value="Camera Four" onclick="showImg(4)" >
  <input type="button" value="Camera Five" onclick="showImg(5)" >
  <input type="button" value="Camera Six" onclick="showImg(6)" >