By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,006 Members | 641 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,006 IT Pros & Developers. It's quick & easy.

Displaying more than one picture at a time

P: 1
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:
Expand|Select|Wrap|Line Numbers
  1. <frameset cols="25%,75%"> 
  2.     <frame name="menu" src="buttons.html"   frameborder="1">
  3.     <frame name="contentFrame" src="main.html"   frameborder="1">
  4. </frameset>
Rest of Code
Expand|Select|Wrap|Line Numbers
  1. <form id="image" action="">
  2.   <p>
  3.     <input type="radio" name="imageButtons" value="image1" onclick="javascript:whichimage('image1')" />image 1<br />
  4.     <input type="radio" name="imageButtons" value="image2" onclick="javascript:whichimage('image2')" />image 2<br />
  5.     <input type="radio" name="imageButtons" value="image3" onclick="javascript:whichimage('image3')" />image 3<br />
  6.     <input type="radio" name="imageButtons" value="image4" onclick="javascript:whichimage('image4')" />image 4<br />
  7.     <input type="radio" name="imageButtons" value="image5" onclick="javascript:whichimage('image5')" />image 5<br />
  8.     <input type="radio" name="imageButtons" value="image6" onclick="javascript:whichimage('image6')" />image 6<br />
  9.   </p>
  10. </form>
  11. <script type="text/javascript">
  12. <!--
  13.  
  14. function whichimage(imagename) {
  15.   var image1 = "image1.jpg";
  16.   var image2 = "image2.jpg";
  17.   var image3 = "image3.jpg";
  18.   var image4 = "image4.jpg";
  19.   var image5 = "image5.jpg";
  20.   var image6 = "image6.jpg";
  21.  
  22.   // Get the content frame
  23.  
  24.   var contentFrame = parent.frames["contentFrame"];
  25.  
  26.   if (document.getElementById) {  // W3C Javascript
  27.     switch(imagename) {
  28.       case "image1" : 
  29.         contentFrame.location.href=image1;
  30.         break;
  31.       case "image2" :
  32.         contentFrame.location.href=image2;
  33.         break;
  34.       case "image3" :
  35.         contentFrame.location.href=image3;
  36.         break;
  37.       case "image4" :
  38.         contentFrame.location.href=image4;
  39.         break;
  40.       case "image5" :
  41.         contentFrame.location.href=image5;
  42.         break;
  43.       case "image6" :
  44.         contentFrame.location.href=image6;
  45.         break;
  46.     }
  47.   }
  48.   else {
  49.     alert("Your browser does not appear to support DOM 2");
  50.   }
  51. }
Mar 13 '07 #1
Share this Question
Share on Google+
1 Reply

acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN.

Instead of changing the location, just append the img object to the body of that frame or use innerHTML.
Mar 14 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.