Displaying more than one picture at a time

[nowitsoverx]

I'm just trying to test something out to see if I can get it working but I'm a little stuck. I have two frames. The left one has a menu of radio buttons. I want it so when you click on the radio button it will show the picture in the right frame. When you click on a different radio button I want it to show that picture to the right of the other picture that's already there. When you click another radio button I want it to show that picture to the right of the other two and so on. I can only get it to display one picture at a time. Can somebody point me in the right direction? Thanks.

The code is below:

Frame Code:

<frameset cols="25%,75%"> 
    <frame name="menu" src="buttons.html"   frameborder="1">
    <frame name="contentFrame" src="main.html"   frameborder="1">
</frameset>

Rest of Code

<form id="image" action="">
  <p>
    <input type="radio" name="imageButtons" value="image1" onclick="javascript:whichimage('image1')" />image 1<br />
    <input type="radio" name="imageButtons" value="image2" onclick="javascript:whichimage('image2')" />image 2<br />
    <input type="radio" name="imageButtons" value="image3" onclick="javascript:whichimage('image3')" />image 3<br />
    <input type="radio" name="imageButtons" value="image4" onclick="javascript:whichimage('image4')" />image 4<br />
    <input type="radio" name="imageButtons" value="image5" onclick="javascript:whichimage('image5')" />image 5<br />
    <input type="radio" name="imageButtons" value="image6" onclick="javascript:whichimage('image6')" />image 6<br />
  </p>
</form>
<script type="text/javascript">
<!--
 
function whichimage(imagename) {
  var image1 = "image1.jpg";
  var image2 = "image2.jpg";
  var image3 = "image3.jpg";
  var image4 = "image4.jpg";
  var image5 = "image5.jpg";
  var image6 = "image6.jpg";
 
  // Get the content frame
 
  var contentFrame = parent.frames["contentFrame"];
 
  if (document.getElementById) {  // W3C Javascript
    switch(imagename) {
      case "image1" : 
        contentFrame.location.href=image1;
        break;
      case "image2" :
        contentFrame.location.href=image2;
        break;
      case "image3" :
        contentFrame.location.href=image3;
        break;
      case "image4" :
        contentFrame.location.href=image4;
        break;
      case "image5" :
        contentFrame.location.href=image5;
        break;
      case "image6" :
        contentFrame.location.href=image6;
        break;
    }
  }
  else {
    alert("Your browser does not appear to support DOM 2");
  }
}

[acoder]

Welcome to TSDN.

Instead of changing the location, just append the img object to the body of that frame or use innerHTML.